Saltar al contenido principal

Code Examples

Below are examples of how to integrate Bot AI into your website with different themes and configurations.

Basic Example​

This example shows a basic integration of Bot AI with default settings:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Bot AI Example</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>

    <!-- Bot AI Integration -->
    <script
      id="bot-ai"
      type="module"
      data-apikey="<your-api-key>"
      data-channel-key="<your-channel-key>"
      crossorigin
      src="https://<botai-baseurl>/bot-ai"
    ></script>
  </body>
</html>

Theme Examples​

Bot AI supports various themes. Here are examples for each theme:

Light Theme (Default)​

<script
  id="bot-ai"
  type="module"
  data-primary="#F0F2F5"
  data-secondary="#54656F"
  data-bg-chat="#FFFFFF"
  data-bg-response="#E8FFD9"
  data-apikey="<your-api-key>"
  data-channel-key="<your-channel-key>"
  data-title="Your Title"
  data-external-user-id="your-external-user-id"
  data-user-session-id="your-user-session-id"
  crossorigin
  src="https://<botai-baseurl>/bot-ai"
></script>

Dark Theme​

<script
  id="bot-ai"
  type="module"
  data-primary="#1E1E1E"
  data-secondary="#5c37e6"
  data-bg-chat="#82afa7"
  data-bg-response="#707070"
  data-apikey="<your-api-key>"
  data-channel-key="<your-channel-key>"
  data-title="Your Title"
  data-external-user-id="your-external-user-id"
  data-user-session-id="your-user-session-id"
  crossorigin
  src="https://<botai-baseurl>/bot-ai"
></script>

Blue Theme​

<script
  id="bot-ai"
  type="module"
  data-primary="#E3F2FD"
  data-secondary="#90CAF9"
  data-bg-chat="#FFFFFF"
  data-bg-response="#D9EAFD"
  data-apikey="<your-api-key>"
  data-channel-key="<your-channel-key>"
  data-title="Your Title"
  data-external-user-id="your-external-user-id"
  data-user-session-id="your-user-session-id"
  crossorigin
  src="https://<botai-baseurl>/bot-ai"
></script>

Green Theme​

<script
  id="bot-ai"
  type="module"
  data-primary="#E8F5E9"
  data-secondary="#A5D6A7"
  data-bg-chat="#FFFFFF"
  data-bg-response="#D3FDD3"
  data-apikey="<your-api-key>"
  data-channel-key="<your-channel-key>"
  data-title="Your Title"
  data-external-user-id="your-external-user-id"
  data-user-session-id="your-user-session-id"
  crossorigin
  src="https://<botai-baseurl>/bot-ai"
></script>

Orange Theme​

<script
  id="bot-ai"
  type="module"
  data-primary="#FFF3E0"
  data-secondary="#FFB74D"
  data-bg-chat="#FFFFFF"
  data-bg-response="#FFE5C2"
  data-apikey="<your-api-key>"
  data-channel-key="<your-channel-key>"
  data-title="Your Title"
  data-external-user-id="your-external-user-id"
  data-user-session-id="your-user-session-id"
  crossorigin
  src="https://<botai-baseurl>/bot-ai"
></script>

Size Configuration Examples​

Bot AI supports different sizes. Here are examples:

Small Size (Default)​

<script
  id="bot-ai"
  type="module"
  data-page-size="sm"
  data-apikey="<your-api-key>"
  crossorigin
  src="https://<botai-baseurl>/bot-ai"
></script>

Medium Size​

<script
  id="bot-ai"
  type="module"
  data-page-size="md"
  data-apikey="<your-api-key>"
  crossorigin
  src="https://<botai-baseurl>/bot-ai"
></script>

Large Size​

<script
  id="bot-ai"
  type="module"
  data-page-size="lg"
  data-apikey="<your-api-key>"
  crossorigin
  src="https://<botai-baseurl>/bot-ai"
></script>

Language Configuration Example​

You can set the language for the Bot AI. Here's an example:

<script
  id="bot-ai"
  type="module"
  data-lang="es"
  data-apikey="<your-api-key>"
  crossorigin
  src="https://<botai-baseurl>/bot-ai"
></script>

Full Configuration Example​

Here's an example that combines multiple configuration options:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fully Configured Front Example</title>
  </head>
  <body>
    <h1>Welcome to My Customized Website</h1>

    <script
      id="bot-ai"
      type="module"
      data-primary="#E3F2FD"
      data-secondary="#90CAF9"
      data-bg-chat="#FFFFFF"
      data-bg-response="#D9EAFD"
      data-page-size="md"
      data-lang="en"
      data-apikey="<your-api-key>"
      data-channel-key="<your-channel-key>"
      data-title="Your Title"
      data-external-user-id="your-external-user-id"
      data-user-session-id="your-user-session-id"
      crossorigin
      src="https://<botai-baseurl>/bot-ai"
    ></script>
  </body>
</html>

This example uses the blue theme, sets the size to medium, and specifies English as the language.

Remember to replace the API key with your own when implementing these examples in your project.