How to integrate your chat with Usabilla

In this article, we will cover how you can integrate your own chat functionality with your Usabilla Feedback Button. When you're creating your Usabilla feedback form, you can give the user several options at the intro screen of the feedback form. This includes the option for specific & generic feedback and a third custom option:

Before we get started, let's look at some requirements to set this up:

Requirements

• Access to edit the button form in your Usabilla account
• A chat functionality which can be triggered with JavaScript
• A Tag Management System (recommended)
• Some level of JavaScript knowledge

Table of Content

1. Setting up your custom chat option
2. Create JavaScript code for chat functionality
3. Implement code through your Tag Management System

1. Setting up your custom chat option

First, go to Setup --> Edit default form:

To activate the custom option, you have to click the edit link at the top right corner in the intro screen editor:

Then add the custom option by activating it and choosing "execute script" in the "On click" field:

2. Create JavaScript code for chat functionality

To make this work, you have to create some JavaScript that will execute the chat functionality once a user clicks on the custom option. By using our JavaScript API, we can hook onto the event when a user clicks the custom option. When you add the custom option, make sure you first place the function you want to run into a variable.

<script type='text/javascript'>
function liveChatUsblFunc(){SCRIPT TO ACTIVATE CHAT HERE};
window.usabilla_live("setCustomOptionClick", liveChatUsblFunc)
</script>

In this script, you will have to append the JavaScript code that will trigger the chat functionality. The specific location for this script is commented in the code.

3.  Implement JavaScript code through Tag Management System

Once the code has been modified to suit your specific chat functionality, you have to append it to your website. Most 3rd party scripts today are installed through a Tag Management System. If you don't use one, we highly recommend using one as it gives you a good overview of all the code snippets installed on your pages. It also gives you control over the dependencies between different scripts/tags.

I'll walk through the implementation in Google Tag Manager, which is one of the most used Tag Management Systems out there. If you happen to use another one, the same configurations apply.

1. Start to create a new tag for the custom script:

2. Select Custom HTML Tag:

3. Copy & paste your script snippet into the HTML section:

4. Set up the correct triggering rules for the tag:

In all cases where you will do JavaScript API calls towards Usabilla, the feedback button code has to be executed/triggered first. If the triggering sequence is not set up correctly, the custom option won't work.

5. Set up triggering configuration

This tag should follow the same triggering configuration as you have for the Usabilla Feedback Button

Congratulations! You just achieved a new level of customer centricity. If you have any questions, feel free to reach out to Usabilla Support.