Webchat Styler

Style your Bot

Styler allows you to customize your Web Chat. You can change the UI colors, chat widget size, and more.

Chat Widget

Widget Color

Choose the color of the chat widget.

Image URL

Paste the URL of the image you want to use as the chatbot widget launcher icon.

Widget Size(30px)

Adjust widget size in px. Max size is 52px.

Chat Container

Header Background

Determine the color of the user's chat bubbles.

Chat Background Color

Choose the color of the chat container.

Bot Avatar Color

Pick a color for the Chatbot Avatar

Bot Bubble Color

Determine the color of the bot's chat bubbles.

Bot Bubble Text

Set a color for the bot's text.

User Bubble Color

Determine the color of the user's chat bubbles.

User Bubble Text

Set a color for the user's text.

Chat Layout

Border Radius(10%)

Adjust chatbot corner curvature. Lower values = sharper corners, higher values = rounder corners.

Move Vertical(5%)

Adjust the vertical position of the chat window as a percentage of the total available screen height.

Move Horizontal(10%)

Adjust the horizontal position of the chat window as a percentage of the total available screen width.

Height(60%)

Adjust the height of the chat window as a percentage of the total available screen height.

Width(360px)

Adjust chat window width in pixels. Effective width depends on the 'width' parameter you set.

Right-to-Left Direction

Set the direction of the chat window to right-to-left for languages such as Arabic and Hebrew.