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 theparentElement
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>