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>