Chatbubble (deprecated)

Note that this is documentation for the deprecated chatbubble which will not receive any new features nor bug fixes. From June 1st 2020 we have stopped supporting it completely.

Head on over to the Kindly Chat docs for how to use the latest version of our chat client for web.

Get the embed code

Start by navigating to your bot in the Kindly platform.

Select Connect from the left-hand menu, then go to Publish.

View the embed-code by selecting Show HTML code.

A popup view will display, containing the embed-code you need embed the chatbubble on your webpage. Go ahead and copy the embed-code on to your clipboard by selecting it and hitting the copy button (Mac: CMD+C, Windows: CTRL+C) or simply hit the Copy to clipboard button.

The embed-code should look something like this:

<script type="text/javascript">
  (function(key, context, settings) {
    try {
      window.chatbubbleKey = key;
      window.chatbubbleLocalContext = context || window.chatbubbleLocalContext || {};
      window.chatbubbleLocalSettings = settings || window.chatbubbleLocalSettings || {};
      var scriptEl=document.createElement('script');
      scriptEl.type='text/javascript';
      scriptEl.async='async';
      scriptEl.src='https://chatbubble.kindly.ai/chatbubble.js';
      var targetEl=document.getElementsByTagName('script')[0];
      targetEl.parentNode.insertBefore(scriptEl,targetEl);
    } catch(e) {/* Error handling */}
  }('YOUR-CHATBUBBLE-KEY'));
</script>

Deploying the chatbubble

Once you have copied the embed-code, your ready to add the chatbubble to your page. This should be a simple process that involves updating an HTML template. We recommend pasting the embed-code to the bottom of your HTML template, before the closing </body> tag.

If this sounds strange, foreign or scary, we recommend you contact your website administrator or a developer in your organization for further assistance.

Customizing

There are two options available for configuring the Chatbubble appearance and behaviour:

• Set default settings directly through the Kindly platform.

• Override the default chatbubble settings within the embed-code. This allows for some per-page chatbubble customization.

Set default behaviour and appearance

Start by navigating to your bot in the Kindly platform.

From the left-hand menu, open Settings, then go to Chat bubble.

Configure the chatbot behaviour and appearance according to your needs.

Override behaviour or appearance per page

Sometimes the chatbubble need slightly different behaviour or appearance depending on the page the user is visiting. This can be accomplished using some modification to the original embed-code. Use the following embed-code for overriding the settings. Remember to replace the part that says 'YOUR-CHATBUBBLE-KEY' with the value from your original embed code.

NOTE: In this example, all the available settings have been commented out. To activate a setting, uncomment the line by removing the "//" in the beginning of it.

<script type="text/javascript">
  (function(key, context, settings) {
    try {
      window.chatbubbleKey = key;
      window.chatbubbleLocalContext = context || window.chatbubbleLocalContext || {};
      window.chatbubbleLocalSettings = settings || window.chatbubbleLocalSettings || {};
      var scriptEl=document.createElement('script');
      scriptEl.type='text/javascript';
      scriptEl.async='async';
      scriptEl.src='https://chatbubble.kindly.ai/chatbubble.js';
      var targetEl=document.getElementsByTagName('script')[0];
      targetEl.parentNode.insertBefore(scriptEl,targetEl);
    } catch(e) {/* Error handling */};
  }('YOUR-CHATBUBBLE-KEY', null, {
    // avatar: 'https://something-something.io/avatar.jpg',
    // chatbubble_autopopup: false,
    // chatbubble_autopopup_time: 10000, // in milliseconds
    // chatbubble_keep_open: true,
    // chatbubble_persist_state: false,
    // collect_feedback_thumbs: false,
    // name: 'Your bot name',
    // placeholder: 'Ask me a question…',
    // primary_language: 'nb',
    // start_over_text: 'Restart',
    // typing_duration: 1000,
    // typing_indicator: true,
  }));
</script>

Set language

If you need to pre-configure which language the bot should use to greet the user, just set window.chatbubbleLocalLanguage to a valid language code (one of da, en, fi, nb, nn, sv). See example below.

<script type="text/javascript">
  (function(key, context, settings) {
    try {
      window.chatbubbleKey = key;
      window.chatbubbleLocalLanguage = 'nb';
      var scriptEl=document.createElement('script');
      scriptEl.type='text/javascript';
      scriptEl.async='async';
      scriptEl.src='https://chatbubble.kindly.ai/chatbubble.js';
      var targetEl=document.getElementsByTagName('script')[0];
      targetEl.parentNode.insertBefore(scriptEl,targetEl);
    } catch(e) {/* Error handling */};
  }('YOUR-CHATBUBBLE-KEY'));
</script>

Authentication (Beta)

Kindly supports authenticated users. When your users are authenticated, it's easier to identify them in the Kindly Inbox and you can create more personalized and powerful webhook integrations.

Go to the Kindly Chat authentication section to start authenticating your users. Authentication using the deprecated chat bubble is no longer supported.