On-Page Chat Window

Users can chat inside an element on the webpage.

Available on:  Core | Advanced | Pro

Overview

You can deploy Ada’s chat window right into an element on the webpage, such as a div or section. This offers new ways for people to interact with you in context of the page they’re on.

⚠️ Keep in mind that having the chat within the element appear by default on the page will skew the engagement rate, because the bot is being loaded every time the page is opened, regardless if the person intends to chat or not.

The result might seem like a lot of people are opening the chat, but very few are engaging with the bot.

To get a more accurate engagement rate, we advise having an additional button that opens up the element when people are ready to chat.

See it in action

Here is an example of Ada embedded in a div:

Instructions

Step 1

Use the parentElement option in the adaSettings object to embed Ada in an element on your webpage.

⚠️Note that the id of the element and the value of the parentElement option must match.

<script type="text/javascript">
  window.adaSettings = {
    parentElement: "customAdaContainer"
  }
</script>

<!-- To embed Ada in a div, use: -->
<div id="customAdaContainer">[the bot will appear here]</div>

Step 2

Follow Ada’s technical Embed documentation to learn how to add Ada to your website.

Attached is the code snippet you need to paste into the <head> tag.

⚠️ Be sure to replace <YOUR-BOT-HANDLE> with your own bot handle. Your bot handle is your bot’s unique domain name: https://yourbothandle.ada.support/.

📣Click here to learn how to load a bot on a non-US cluster.

<script
  id="__ada"
  data-handle="<YOUR-BOT-HANDLE>"
  src="https://static.ada.support/embed2.js"
></script>

See what Ada can do for you

Get your hands on our award winning platform and start offering VIP experiences for everyone, at scale.

Get a Demo