Customize the appearance of your Release0 agent, including templates, chat bubbles, and CSS. This guide provides an overview of the Theme section, including how to change the agent’s look and feel, customize chat bubbles, and apply custom CSS styles.
The Theme section allows you to customize the appearance of your Agent.
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.
This section enables you to:
This section allows you to personalize the chat window’s appearance. You can adjust the following elements:
This section allows you to customize the appearance of the Agent’s chat bubble. You can adjust the following elements:
To change the avatar image:
Once changed you can pre-visuialize the changes in the preview pane and see your chat agent in action.
This section allows you to customize the appearance of the user’s chat bubble. You can adjust the following elements:
To change the avatar image:
Once changed you can pre-visuialize the changes in the preview pane and see your chat agent in action.
This section allows you to customize the appearance of the buttons. You can adjust the following elements:
This section allows you to customize the appearance of the inputs. You can adjust the following elements:
This section allows you to customize the typing behaviour of your agent. You can adjust the following elements:
For advanced customization, you can add your own CSS styles.
To create buttons with rounded corners and a gradient color, add the following CSS:
You can configure the chat to be displayed in RTL (Right-to-Left) format by adding the following CSS:
You can customize the color of an individual button by targeting its data-itemid
attribute. For instance:
data-itemid
data-itemid
attribute in the HTML.Note: Always test your customizations in a staging environment before applying them to your live Agent.
Before applying your customizations:
Customize the appearance of your Release0 agent, including templates, chat bubbles, and CSS. This guide provides an overview of the Theme section, including how to change the agent’s look and feel, customize chat bubbles, and apply custom CSS styles.
The Theme section allows you to customize the appearance of your Agent.
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.
This section enables you to:
This section allows you to personalize the chat window’s appearance. You can adjust the following elements:
This section allows you to customize the appearance of the Agent’s chat bubble. You can adjust the following elements:
To change the avatar image:
Once changed you can pre-visuialize the changes in the preview pane and see your chat agent in action.
This section allows you to customize the appearance of the user’s chat bubble. You can adjust the following elements:
To change the avatar image:
Once changed you can pre-visuialize the changes in the preview pane and see your chat agent in action.
This section allows you to customize the appearance of the buttons. You can adjust the following elements:
This section allows you to customize the appearance of the inputs. You can adjust the following elements:
This section allows you to customize the typing behaviour of your agent. You can adjust the following elements:
For advanced customization, you can add your own CSS styles.
To create buttons with rounded corners and a gradient color, add the following CSS:
You can configure the chat to be displayed in RTL (Right-to-Left) format by adding the following CSS:
You can customize the color of an individual button by targeting its data-itemid
attribute. For instance:
data-itemid
data-itemid
attribute in the HTML.Note: Always test your customizations in a staging environment before applying them to your live Agent.
Before applying your customizations: