Installation Guide

Follow these steps to install Puzzle Bot Front on your website.

Step 1: Obtain the Script

Add the following <script> tag to the <head> or the end of the <body> section of your HTML page:

<script
  id="ai-bot-script"
  type="module"
  data-primary="primary-color"
  data-secondary="secondary-color"
  data-bg-chat="chat-background-color"
  data-bg-response="msg-response-background-color"
  data-page-size="sm"
  data-title="your-title"
  data-external-user-id="your-external-user-id"
  data-lang="en"
  data-apikey="your-api-key"
  data-channel-key="your-channel-key"
  data-user-session-id="your-user-session-id"
  crossorigin
  src="https://your-server-url.com/bot-ai"
></script>

Replace the attributes as necessary:

src: The URL of your bot script hosted on your server.
data-apikey: Your unique API key for authenticating requests to the bot service.
Other data-* attributes are optional for customization.

Step 2: Configure Attributes

Customize the attributes according to your needs:

Authentication

Ensure you replace your-api-key with your actual API key.

Theming

Use data-primary, data-secondary, data-bg-chat and data-bg-response to adjust the appearance.

Sizing

Adjust the size with data-page-size (possible values: sm, md, lg).

Language

Set the language with data-lang (e.g., en, es, fr).

Logging

Enable or disable logging with data-enable-logging.

Attribute Reference

Attribute	Description	Possible Values	Default Value
data-primary	Sets the primary color of the bot interface.	Any valid CSS color code	#F0F2F5
data-secondary	Sets the secondary color used in the bot interface elements.	Any valid CSS color code	#54656F
data-bg-chat	Defines the background color of the chat window.	Any valid CSS color code	#FFFFFF
data-bg-response	Sets the background color for the AI responses in the chat.	Any valid CSS color code	#E8FFD9
data-page-size	Determines the size of the bot widget on the page.	sm, md, lg	sm
data-lang	Specifies the language for the bot interface.	ISO language codes (e.g., en, es)	en
data-apikey	Your unique API key to authenticate requests to the bot service.	String	Required
data-title	Sets the title displayed on the bot interface.	String	Your Title
data-external-user-id	Associates the bot session with an external user ID.	String	Optional
data-channel-key	Your channel key for integrating with specific platforms.	String	Required
data-user-session-id	Associates the bot session with a user session ID.	String	Optional

Step 3: Verify the Installation

Save the changes and reload your website to verify that the assistant is displayed correctly.

Important Note

Compatibility: Some hosting providers may not allow embedded scripts. Verify with your hosting provider if there are any restrictions.

Step 1: Obtain the Script​

Step 2: Configure Attributes​

Authentication​

Theming​

Sizing​

Language​

Logging​

Attribute Reference​

Step 3: Verify the Installation​

Important Note​