There are many ways to customize the look and behavior of your Ada chatbot with Embed2. You can use a custom chat button, delay bot loading, or improve page load times.
Without any code, you can customize chat attributes like the button color and icon. Apply custom styles, or use a custom icon that reflects your brand, through the chat button settings in the dashboard.
Customize chat components
The chat button is located in the lower right corner of a chatter's screen. When a chatter clicks the button, it launches the chat window, which is the interface through which a chatter interacts with Ada. In Embed we refer to this as the chat drawer, and users sometimes call it a chat bubble.
Use a custom chat button
-
Complete the Embed2 quick start to add Ada to your website.
-
Use the toggle action to open chat from an html element on your website. For example, you could add it to a
button
, with a JavaScriptonclick
event, as in the following:<button onclick="window.adaEmbed.toggle()">Open chat</button>
With Embed2, any html element on your webpage can become a way to start a conversation. For example, you can launch your chatbot from any html element or trigger a campaign when a visitor clicks a custom button. For more ideas, see the Embed Directory and the Embed Use Cases guide.
Hide the default chat button
You can use the CSS display
property to hide the default chat button.
We recommend that you keep the Ada button visible, even when using a separate element to launch chat.
- Locate the the page or pages in your website for which you want to hide the default chat button.
- Add the following CSS within the
body
:
<style>
#ada-button-frame {
display: none;
}
</style>
Customize when the bot loads
You can customize when the bot loads on your page, to further fine-tune your chatters' experience on your website.
Delay bot loading
Use lazy mode to delay Embed2 instantiation until a certain event.
If your team is facing an implementation issue with a part of Ada that relies on the Embed2 script to be present and running, using lazy mode may mitigate the issue.
To put Embed2 in lazy mode, add the attribute data-lazy
to the Embed2 script, as in the following example.
<script
id="__ada"
data-lazy
data-handle="<YOUR-BOT-HANDLE>"
src="https://static.ada.support/embed2.js">
</script>
When you are ready to instantiate Embed2, call the start action within your code. You can pass any settings you would normally set in window.adaSettings here.
window.adaEmbed.start({
handle: "my-bot",
metaFields: {
username: "Ada Lovelace",
phone_number: "123-456-7890"
},
chatterTokenCallback: (chatter) => console.log(chatter)
});
Use async to improve page load times
The async
attribute for HTML script elements "allows the elimination of parser-blocking JavaScript where the browser would have to load and evaluate scripts before continuing to parse."1. You can use this with the Embed2 script to improve page load times, but there are some caveats.
If your bot implementation makes use of any actions from the global adaEmbed
object, you must wait for the object to be added to your document. There are two common ways to handle this:
- Use the native script
onload
handler. When the script has loaded, theload
event will be triggered. It is safe to calladaEmbed
actions from here.
<script
async
id="__ada"
data-handle="<YOUR-BOT-HANDLE>"
src="https://static.ada.support/embed2.js">
</script>
- Use adaReadyCallback, which you can set in
window.adaSettings
. Note that while in the examples provided,toggle
will work effectively the same way,adaReadyCallback
is triggered afteradaEmbed.start(...)
has executed. Meanwhile,onload
is simply triggered when the Embed2 script has been loaded.
<script
async
id="__ada"
onload="window.adaEmbed.toggle()"
data-handle="<YOUR-BOT-HANDLE>"
src="https://static.ada.support/embed2.js">
</script>
window.adaSettings = {
adaReadyCallback: () => {
window.adaEmbed.toggle();
}
};