- Select a default theme or customize your theme using the settings.json editor. Available default themes: edna, Threadsim, Halcyon, Adaptive.
- Click on the chat icon in the lower-right corner to preview the web widget.
- Specify the theme settings and set the web widget colors in the Theme settings block.
- Configure the web widget icon in the Widget icon block.
- Choose the web widget buttons in the Widget buttons block.
- If you are configuring the Greeting web widget type, configure the customer welcome form in the Greeting settings block.
Theme Settings
Click on the chat icon in the lower-right corner and select the widget type you want to preview from the Widget state preview drop-down list:
- Greeting. To send messages to the chat, the customer should provide their data: name, phone number or email.
- Chat. The customer can send messages to the chat without specifying their data.
If you’ve selected one of the default themes, configure the web widget colors using the color palette or specify the HEX codes of the required colors in the following settings:
| Setting | Description |
| Main color | Specify the main base color for the web widget elements: • web widget icon background; • customer message background; • message input field background; • button borders; • button text color. |
| Additional color | Specify the additional base color for the web widget elements: • background of the attachment preview area and quoted messages; • button borders and the button text color when pointing to them. |
| Text color | Specify the color of the message text color and the text in the web widget header. |
| Additional text color | Specify the additional text color for the elements: • icon to close the chat; • text in text fields; • system messages. |
| Line color | Specify the web widget line color for the agent message background and the text field borders. |
| Widget background color | Specify the color for the following elements: • web widget background; • text of the attachment preview area and quoted messages; • message input field text; • web widget header background. |
| Width | Specify the web widget width with the unit of measurement. For example, 350 px. |
| Height | Specify the web widget height with the unit of measurement. For example, 500 px. |
To clear all settings, click Reset theme.
Web Widget Icon
Specify the settings for the web widget icon:
| Setting | Description |
| Collapsed widget icon | Click Upload an image and choose the file you want to use as the icon for the collapsed web widget. Acceptable formats: JPEG, PNG, SVG. The maximum file size is 1 MB. |
| Collapsed widget button background | Specify the background color for the collapsed web widget icon using the color palette or HEX code. |
Web Widget Buttons
To add a button to the web widget, activate the switch to the left of the required button.
Available buttons:
- Emoji button. To use emoji in the message text.
- Send message button. To send messages.
- Send attachment button. To attach images or files to a message.
- Record voice message button. To record and send voice messages.
Greeting Settings
To set up a form for entering customer data, activate the Greeting messages switch.
Specify the following greeting settings:
| Setting | Description |
| Greeting header | Enter the greeting header text. For example, “Got a question for us? Let’s discuss it here!” |
| Greeting subheader | Enter the text that should be displayed under the greeting header. For example, “Please introduce yourself and let’s begin.“ |
| Header after introduction | Enter the header text that should be displayed after the customer enters and submits their information. |
| Subheader after introduction | Enter the text that should be displayed below the header after the customer enters and submits their information. |
| Name field | Activate the Name field switch to add a field for entering the customer’s name to the web widget. If necessary, enable the Required checkbox to make the field mandatory. |
| Mobile field | Activate the Mobile field switch to add a field for entering the customer’s phone number to the web widget. If necessary, enable the Required checkbox to make the field mandatory. |
| Email field | Activate the Email field switch to add a field for entering the customer’s email address to the web widget. If necessary, enable the Required checkbox to make the field mandatory. |
| Introduction button text | Enter the text that should be displayed on the button for submitting customer data. |