To add your Ada chatbot to a website, use Embed2, a piece of Javascript code that you can copy and paste.

🚧

If you're not sure how to implement the Embed2 script, please reach out to an Ada team member. Note that all implementations are ultimately the responsibility of your development team.

πŸ‘

As alternative to using the Javascript snippets described below, you may use our Embed2 and Embed Types NPM packages.

Embed2 code

For all website pages where you want your bot to appear, paste the following code within the <head></head> tags. Replace <YOUR-BOT-HANDLE> with the name of your bot.

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

Next, complete the steps below to enable your bot.

Enable your bot

To get started with Ada, once you've added the Embed2 code, you must turn on your bot, and set up approved domains.

πŸ“˜

For security purposes, your bot won't launch on a domain that you haven't authorized.

  1. On the Ada dashboard, go to Settings > Integrations.

  1. Switch the Ada Web Chat toggle on.
  2. Go to Settings > Bot Setup > Approved Domains.
  3. Click Add Domain.

  1. Type the Domain URL for the website where you want to host your bot.
  2. Click Add.

That's it!

You should now see a small chat button on the bottom right corner of your website. Click the button to toggle the chat window in and out of view. See an example.

πŸ‘

Embed2 also supports a rich set of actions and settings that you can use to customize the behavior of your bot. For example, you might want to delay the launch of your bot until a certain event, or set the bot language. Maybe your application is a a single-page app, and you need more control. The Embed2 reference covers all of these options and more.

Load a bot on a non-US cluster

If your bot is not on the US cluster, use data-domain in the Embed2 script to specify the correct cluster. In the following example, "maple.ada" is the cluster name.

<script
    id="__ada"
    data-domain="maple.ada" // for example eu.ada, att.ada etc.
    data-handle="<YOUR-BOT-HANDLE>"
    src="https://static.ada.support/embed2.js">
</script>

πŸ“˜

If you're not sure which cluster your bot is on, please reach out to an Ada team member

RequireJS

If you are using RequireJS as your module loader, you may encounter issues with the standard Embed2 setup. This is because RequireJS does not know how to interpret the id and data-handle attributes that Ada uses. Instead of setting these attributes, you can simply set handle in your window.adaSettings object.

<script>
  window.adaSettings = {
    handle: "<YOUR-BOT-HANDLE>"
  };
</script>

<script
  src="https://static.ada.support/embed2.js">
</script>

If you encounter additional errors, consult the RequireJS Common Errors documentation.