Overview

The Theme section allows you to customize the appearance of your Agent.

​

Template

The Template section provides a variety of pre-designed themes to choose from. You can select a template that best fits your needs and customize it further.

​

Global

This section enables you to:

• Enable or disable the Agent branding.
• Change the font used by your Agent.
• Customize the background of your Agent.
• Show the Agent’s flow progress bar.

​

Chat container

This section allows you to personalize the chat window’s appearance. You can adjust the following elements:

• Text color
• Max width
• Max height
• Background type
• Border
• Roundness

​

Agent Bubble

This section allows you to customize the appearance of the Agent’s chat bubble. You can adjust the following elements:

• Show or hide Agent’s avatar
• Avatar image
• Text color
• Background color
• Background type
• Border
• Roundness
• Opacity

To change the avatar image:

1. Click on teh toggle to show the avatar.
2. Click on the agent avatar within the Chat section.
3. Upload or select a new image.

Once changed you can pre-visuialize the changes in the preview pane and see your chat agent in action.

​

Guest Bubble

This section allows you to customize the appearance of the user’s chat bubble. You can adjust the following elements:

• Show or hide user’s avatar
• Avatar image
• Text color
• Background color
• Background type
• Border
• Roundness
• Opacity

To change the avatar image:

1. Click on the user’s avatar within the Chat section.
2. Upload or select a new image.

Once changed you can pre-visuialize the changes in the preview pane and see your chat agent in action.

​

Buttons

This section allows you to customize the appearance of the buttons. You can adjust the following elements:

• Text color
• Background color
• Background type
• Border
• Roundness
• Opacity
• Shadow
• builder

​

Inputs

This section allows you to customize the appearance of the inputs. You can adjust the following elements:

• Text color
• Placeholder color
• Background color
• Background type
• Opacity
• Border
• Roundness
• Shadow
• builder

​

Typing

This section allows you to customize the typing behaviour of your agent. You can adjust the following elements:

• Typing emulation:
  • Enable or disable typing emulation.
  • Adjust the typing speed (in milliseconds).
  • Adjust the maximum delay between messages (in seconds)
  • Adjust the delay before the first message is sent (in seconds).

​

Custom CSS

For advanced customization, you can add your own CSS styles.

​

Inspecting Elements for Custom CSS

1. Navigate to the Theme page.
2. Right-click on the agent or the specific element you want to modify.
3. Select Inspect to view and target the element’s CSS.

​

Example: Rounded Buttons with Gradient Colors

To create buttons with rounded corners and a gradient color, add the following CSS:

.agent-button {
  border-radius: 40px;
  background-image: linear-gradient(to right, #e052a0, #f15c41);
  border: none;
}

​

Example: Configuring RTL chat

You can configure the chat to be displayed in RTL (Right-to-Left) format by adding the following CSS:

.agent-container {
  direction: rtl;
}

.agent-avatar-container {
  margin-right: 0;
  margin-left: 0.5rem;
}

.guest-container {
  margin-left: 0;
  margin-right: 50px;
}

​

Example: Customize a Single Button’s Color

You can customize the color of an individual button by targeting its data-itemid attribute. For instance:

[data-itemid='cl3iunm4p000f2e6gfr8cznnn'] {
  background-color: gray;
  border-color: gray;
}

​

Finding the Button’s data-itemid

1. Right-click on the button you want to customize.
2. Select Inspect to view the data-itemid attribute in the HTML.

Note: Always test your customizations in a staging environment before applying them to your live Agent.

​

Validation and Testing

Before applying your customizations:

• Ensure that the custom CSS is properly formatted.
• Test changes across different devices and browsers for consistency.
• Verify that all visual components work as intended.