You can easily implement a Usabilla Button through Tealium. Implementing your Usabilla Button through Tealium allows you to add load rules for each Usabilla Button. Having those rules available enables, for example, to load a specific Usabilla Button for mobile users. In this article, we'll guide you through the steps for implementing your Usabilla Button through Tealium.
Adding the Tag
Log into your Tealium account. After you're logged in go to the ‘Tags’ tab and click on the 'Add Tag' Button.
Next, you'll need to go to the Tag Marketplace. In the Tag Marketplace search for 'Usabilla' using the search field on the top of the page. You'll see Usabilla show up in the search results.
Add the Usabilla Tag by clicking on the '+ Add' button
After you've clicked on the '+ Add' button you'll be prompted with a Tag Setup Window.
Tag Setup
Start by giving your tag a title. It's good practice to have descriptive names for your tags. So for example, if you're adding a Usabilla Button for Desktop users, a good title would be 'Usabilla Desktop Button'.
After the title, you'll also need to fill out the account ID field. In the account ID field, you'll need to fill in the ID of the Usabilla Button you wish to install. The Button ID can be found in the URL of the installation instructions page of your button and on the Buttons&Forms Setup page. Both pages can be found in your Usabilla Environment.
In the example, you see that we filled in “f411220e4427” as the button ID in the 'Account ID' field in Tealium. In the screenshots below we highlighted where you would find the Button ID for an additional button. The button ID in the examples below is 0e3cb965ef73.
Click on the 'Next' button to go to the ‘Load Rules’ page. Here we determine when your button is going to be shown.
By default, the button code you have just added will be shown on all pages. However, if you’d like to show different buttons on mobile and desktop, you can now Create a Load Rule by clicking ‘Create Rule’.
Adding Rules
If I want to show this button on desktop only, I can now create a rule that only shows this tag when the browser width is larger than 500px
Click the 'Apply' button to save the Load Rule you just created.
You can repeat the steps above to add other buttons, that fire on different load rules. For example, a Usabilla Mobile Feedback Button that fires on a load rule “Browser Width is less than 500”, as shown in the example below.
Finally, you can Publish the tags to your testing or production environment by clicking on the "Save/Publish' button
