Skip to main content

ChatBot

To convert the documentation from AI12Z Knowledge Box to AI12Z ChatBot Control, here's how the new documentation should look, based on the AI12Z ChatBot Control tag structure you provided:

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>"
  bot-name="AI12Z bot"
  placeholder-text="AI search"
  chat-position="right"
  welcome-message="Hi there! How can I assist you today?"
  chat-width="35%"
  chat-height="80%"
  chatlogo="https://unpkg.com/ai12z@latest/dist/esm/assets/ai12z-bot/img/chatbot.jpg"
  chat-avatar="https://unpkg.com/ai12z@latest/dist/esm/assets/ai12z-bot/img/chatbot.jpg"
></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
bot-name (Optional)The name that will be displayed for the chatbotbot-name="AI12Z bot"AI12Z bot
placeholder-text (Optional)Text that appears in the input field when the user hasn't typed anythingplaceholder-text="AI search"Type your message...
chat-position (Optional)Position of the chatbot on the screen: left, right, or centerchat-position="right"right
welcome-message (Optional)Message displayed when the chatbot openswelcome-message="Hi there! How can I assist you today?"Hi! How can I help you?
chat-width (Optional)Width of the chatbot windowchat-width="35%"25%
chat-height (Optional)Height of the chatbot windowchat-height="80%"60%
chatlogo (Optional)URL of the logo image for the chatbotchatlogo="https://unpkg.com/ai12z@latest/dist/esm/assets/ai12z-bot/img/chatbot.jpg"
chat-avatar (Optional)URL of the avatar image that represents the chatbotchat-avatar="https://unpkg.com/ai12z@latest/dist/esm/assets/ai12z-bot/img/chatbot.jpg"

Example with Styling​

<html>
  <head>
    <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"
    />
  </head>
  <body>
    <ai12z-bot
      data-key="8cdd997e8a0583a57d58ab8b4195722cacf3daddce485d9b624452ed2730e7d4"
      data-mode="dev"
      bot-name="AI12Z bot"
      placeholder-text="AI search"
      chat-position="right"
      welcome-message="Hi there! How can I assist you today?"
      chat-width="35%"
      chat-height="80%"
      chatlogo="https://unpkg.com/ai12z@latest/dist/esm/assets/ai12z-bot/img/chatbot.jpg"
      chat-avatar="https://unpkg.com/ai12z@latest/dist/esm/assets/ai12z-bot/img/chatbot.jpg"
    ></ai12z-bot>

    <style>
      .ai12z-bot-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #f9f9f9;
        border-radius: 10px;
        padding: 1rem;
      }

      .ai12z-bot-avatar {
        border-radius: 50%;
        width: 50px;
      }

      .ai12z-bot-message p {
        color: black;
      }
    </style>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const bot = document.querySelector("ai12z-bot")
        bot.setAttribute("bot-name", "AI12Z Assistant")
      })
    </script>
  </body>
</html>

This setup allows for easy deployment and customization, ensuring that the ChatBot Control integrates smoothly into your website's design and functionality.