App Directory

Customize chat

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.

Chat components

Use a custom chat button

  1. Complete the Embed2 quick start to add Ada to your website.

  2. 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 JavaScript onclick 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.

  1. Locate the the page or pages in your website for which you want to hide the default chat button.
  2. 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, the load event will be triggered. It is safe to call adaEmbed 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 after adaEmbed.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();
  }
};