Skip to main content

Integration

Overview​

The ai12z ChatBot Control is a web component designed to provide a conversational AI experience on your website, similar to chatbots. This feature offers users an interactive, AI-powered chatbot that can answer queries, guide users, and provide relevant information seamlessly.

Setup​

To integrate the ChatBot Control, follow either of the two methods below:

  1. Include the following script tag in the <head> section of your HTML.

    <script
      type="module"
      src="https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
    />

  2. Add the following script to the HTML section of the Tag Configuration in Google Tag Manager.

    <script>
      ;(function () {
        var script = document.createElement("script")
        script.type = "module"
        script.src =
          "https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
        script.async = true
        document.head.appendChild(script)
        var link = document.createElement("link")
        link.rel = "stylesheet"
        link.href =
          "https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
        document.head.appendChild(link)

        script.onload = function () {
          if (window.Bot) {
            window.Bot.init()
          }
        }
      })()
    </script>

You can then use the <ai12z-bot> tag anywhere in your HTML to display the ChatBot.</ai12z-bot>

Attributes and Customization​

<ai12z-bot data-key="<API_KEY>"></ai12z-bot>

Attributes​

PropertyDescriptionExampleDefault
data-key (Required)API key from your ai12z project settingsdata-key="Add your Key here"
data-mode (Optional)Server to use dev or prod or localdata-mode="dev"prod
config-id (Optional)Configure the particular bot otherwise the default bot config will loadconfig-id="123455"

Custom bot (Optional)​

If bot tag exists the standard bot control will be replaced with the html in the bot tag

<ai12z-bot data-key="your_api_key_here">
  <div slot="bot">
    <img
      style="width: 20px; cursor: pointer"
      src="https://cdn.ai12z.net/assets/web/magnifying-glass-solid.svg"
      alt="chat"
    />
  </div>
</ai12z-bot>

Passing attributes and tags​

Attributes​

Developer can pass a dictionary of additional data that can be used in prompts if you include the attribute tag in Answer AI.

IncludeTags​

Array of tags, only content with one of these tags will be returned.

ExcludeTags​

Array of tags,content will be excluded if it has one of these tags.

Example for passing the attributes,excludeTags and includeTags​

      document.addEventListener("DOMContentLoaded", function () {
        const ele = document.querySelector("ai12z-bot")
        if (ele) {
          ele.excludeTags = ["blog"]
          ele.includeTags = []
          ele.dataAttributes = {
            content: {
              newlist: [
                {
                  _uid: "BUY6Drn9e1",
                  component: "foo",
                  headline: "Foo",
                },
                {
                  _uid: "gJZoSLkfZV",
                  component: "bar",
                  title: "Bar",
                },
                {
                  _uid: "X1JAfdsZxy",
                  component: "foo",
                  headline: "Another headline",
                },
              ],
            },
          }
        }
      })

Custom Events​

Event NameDescriptionHow to use it
messageSentThis event will trigger when user sent an message to serverconst botElement = document.querySelector('ai12z-bot'); botElement.addEventListener('messageSent',async(event) => {console.log(event.detail)})
messageReceivedThis event will trigger when user received a response from serverbotElement.addEventListener('messageReceived',async(event) => {console.log(event.detail)})
closeThis event will trigger when user close the bot from client side botElement.addEventListener('close', async(event) => { console.log(event.detail)})
openThis event will trigger when user open the bot from client side botElement.addEventListener('open', async(event) => {console.log(event.detail)})
minimizeThis event will trigger when user minimize the bot from client sidebotElement.addEventListener('minimize', async(event) => {console.log(event.detail)})
erroredThis event will trigger when any error thrown from server sidebotElement.addEventListener('errored', async(event) => {console.log(event.detail)})

Custom Methods​

Method NameDescriptionHow to use it
actionAction allows us to do open, close and minimize the bot from client side. We have to pass the action type as an arugument to do particular actionasync function openBot() {try {awaitcustomElements.whenDefined('ai12z-bot'); const botElement = document.querySelector('ai12z-bot');await botElement.action('open'); } catch (error) {console.error('Error fetching data:', error);}}
sendMessageThis method allows us to send a message programmatically.It accepts two parameters.Message (Required) – The first parameter must be a string containing the message to be sent.Display Text (Optional) – The second parameter is optional and should be a string that specifies the display text for the message.If the second parameter is not provided, the default behavior will be used.async function openBot() {try {awaitcustomElements.whenDefined('ai12z-bot'); const botElement = document.querySelector('ai12z-bot');await botElement.sendMessage('what are the activities available?','List all activities'); } catch (error) {console.error('Error fetching data:', error);}}
sendJSONThis method allows us to send a JSON programmatically.It accepts two parameters.jsonData (Required) – The first parameter must be an object which will sent.DisplayText(Required) – The second parameter should be a string that specifies the display text for the message.const botElement=document.querySelector("ai12z-bot");botElement.sendJSON("{firstname:"xxxx",lastname:"yyyy",dob:"zzzz"}","Info submitted")