Skip to main content

ChatBot Control

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 into your site, include the following script tag in the <head> section of your HTML:

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

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

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-cta data-key="your_api_key_here">
  <div slot="bot">
    <img
      style="width: 20px; cursor: pointer"
      src="https://demo.ai12z.com/wp-content/uploads/2024/08/magnifying-glass-solid.svg"
      alt="chat"
    />
  </div>
</ai12z-cta>

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);}}
sendMessagesendMessage allows us to send query from client side to server sideasync function openBot() {try {awaitcustomElements.whenDefined('ai12z-bot'); const botElement = document.querySelector('ai12z-bot');await botElement.sendMessage('what are the activities available?'); } catch (error) {console.error('Error fetching data:', error);}}