Configuration

Learn how to configure and customize Puzzle Bot Front to suit your needs.

Available Parameters

data-apikey (Required)

Your API key to authenticate requests to the bot service.

''' data-apikey="your-api-key" '''

data-theme (Optional)

Sets the theme of the bot interface.

''' data-theme="light" '''

Possible values: light, dark

Default value: light

data-enable-logging (Optional)

Enables or disables logging of bot interactions.

''' data-enable-logging="true" '''

Possible values: true, false

Default value: false

data-title (Optional)

Sets the title displayed on the bot interface.

''' data-title="Your Title" '''

Type: String

Default value: Your Title

data-external-user-id (Optional)

Associates the bot session with an external user ID.

''' data-external-user-id="your-external-user-id" '''

Type: String

Default value: Optional

data-channel-key (Required)

Your channel key for integrating with specific platforms.

''' data-channel-key="your-channel-key" '''

Type: String

Default value: Required

data-user-session-id (Optional)

Associates the bot session with a user session ID.

''' data-user-session-id="your-user-session-id" '''

Type: Number

Default value: Optional

Theming Options (Optional)

Customize the appearance of the assistant:

• Primary Color: data-primary
• Secondary Color: data-secondary
• Chat Background Color: data-bg-chat
• Response Background Color: data-bg-response
• Theme: data-theme

Example:

''' data-primary="#F0F2F5" data-secondary="#54656F" data-bg-chat="#FFFFFF" data-bg-response="#E8FFD9" data-theme="dark" '''

Language (Optional)

Set the default language of the assistant.

''' data-lang="en" '''

Possible values: ISO language codes (e.g., en, es, fr).

Size (Optional)

Adjust the size of the assistant on your website.

''' data-page-size="sm" '''

Possible values: sm, md, lg.

Logging (Optional)

Enable or disable logging of bot interactions.

''' data-enable-logging="true" '''

Possible values: true, false

Complete Example

<script
  id="puzzle-bot-script"
  type="module"
  data-apikey="your-api-key"
  data-channel-key="your-channel-key"
  data-primary="#F0F2F5"
  data-secondary="#54656F"
  data-bg-chat="#FFFFFF"
  data-bg-response="#E8FFD9"
  data-lang="en"
  data-page-size="sm"
  data-theme="light"
  data-enable-logging="true"
  data-title="Your Title"
  data-external-user-id="your-external-user-id"
  data-user-session-id="your-user-session-id"
  crossorigin
  src="https://your-server-url.com/bot-ai"
></script>

Advanced Configuration

If you require more advanced customization, you can modify the CSS styles in the bot-front app. The bot-front app uses Chakra UI for styling, making it easy to customize the appearance of the bot.

Note: After making changes, remember to rebuild the bot-front app and update the server with the latest build.

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