Themes is an option to customize the appearance of the web chat panel, Ads, and RCS Emulator.
The Themes page provides different parameters with default values for the appearance. You can change these default values of all parameters to make the appearance as per the branding requirements.
After setting the parameters, you can save them as a new theme. This can save time in settings the parameters again and again. You can just select the theme and quickly change the appearance.
Saving customization as a new theme
Theme Customization
The following table describes different parameters to customize the theme:
| Field | Description |
|---|---|
| Text Type Delay (ms) | The delay (in milliseconds) that you want to set while typing the message text. |
| Placeholder | The default text that you want to use to appear in the message typing area. Default is 'Message here...'. |
| Avatar Icon | The icon to popup the web chat panel. The icon appears at the bottom right side of the screen. |
| Background Image | The background image of the web chat panel. |
| Remove Footer Input Form | Select the check box to remove the input field from the footer of the web chat panel. |
| Get Started Without History | Select the check box to start the web chat panel without displaying the previous chat history. |
| Color Settings Set the color for different components of the Web Chat panel. For example, button color, status color, background color, and so on. | |
| Status Color | |
| Background Color | The background color of the web chat panel. |
| Hover Color | The color for the hyperlinked text. The color appears when you move the mouse pointer on the hyperlinked text. |
| Right Speech Bubbels Background Color | The background color of the right speech bubble. |
| Right Speech Bubbles Text Color | The text color of the right speech bubble. |
| Left Speech Bubbles Background Color | The background color of the left speech bubble. |
| Left Speech Bubbles Text Color | The text color of the left speech bubble. |
| Size Settings Set the Web Chat panel size, the font size, the text margins, button font size, and so on. You can set the size in pixel. | |
| Width (px) | The width (in pixel) of the web chat panel. |
| Height (px) | The height (in pixel) of the web chat panel. |
| Message Top Margin (px) | The margin (in pixel) on the top side of the web chat panel. |
| Message Item Top Margin (px) | The margin (in pixel) on the top side of the message item in the web chat panel. |
| Speech Bubbles Font Size (px) | The font size (in pixel) of the text in the speech bubble. |
| Video Settings Set the size of the video play window and auto play mode. | |
| Max Width (%) | The maximum width of the video player window. |
| Auto Play | Select the check box to enable auto-playing functionality of the video. |
| Image Settings Set the maximum width of the image | |
| Max Width (%) | The maximum width of the image in percentage. |
| Font Settings Set the font options for the name and fallback message text. | |
| URL | The URL of the google font family that you want to use. |
| Name | The font name to be used. |
| Fallback | The fallback font to be used. |
| Message Font Settings The font settings for the messages in the web chat panel. | |
| URL | The URL of the google font family that you want to use. |
| Name | The font name to be used. |
| Fallback | The fallback font to be used. |
| Input Form Settings The color, font, and size settings for the input field in the web chat panel. | |
| Background Color | The background color of the input field. |
| Placeholder Color | The color of the placeholder text that appears in the input field. |
| Text Color | The color to the text that you enter in the input field. |
| Height (px) | The height of the input message field. |
| Font size (px) | The font size of the text entered in the input message field |
| Vertical Padding Size (px) | The vertical padding of the input message field. |
| Horizontal Padding Size (px) | The horizontal padding of the input message field. |
| Icons Color | The color of the icons that appear in the input message field. |
| Icons Size (px) | The size of the icon that appears in the input message field. |
| Icons Vertical Padding Size (px) | The vertical padding for the icons that appear in the input message field. |
| Button Settings Set the options for the action button that appears in the web chat panel. | |
| Text Color | The color of the button text. |
| Background Color | The background color of the button. |
| Font Size (px) | The font size of the button text. |
| Padding (px) | The padding of the button text from all sides. |
| Border Color | The color of the button. |
| Border Radius (px) | The corner radius of the button. |
| Quick Replies Settings Set the options for quick replies from the customer. | |
| Display Mode | The display modes of the quick replies. The available options are:
|
| Text Color | The color of the text in the quick reply. |
| Background Color | The background color of the quick reqply. |
| Height (px) | The height of the quick reply box. |
| Font Size (px) | The font size of the quick replies. |
| Padding (px) | The padding from all sides of the quick reply. |
| Vertical Padding (px) | The vertical padding of the quick reply box. |
| Border Color | The color of the border color. |
| Border Radius (px) | The corner radius of the quick reply box. |
| Quick Replies Multi Select Settings Set the multi select options for the quick replies | |
| Submit Button Width (%) | The width of the Submit button. |
| Submit Button Border Radius (px) | The corner radius of the quick reply button. |
| Submit Button Padding (px) | The padding of the Submit button from all sides. |
| Submit Button Background Color | The background color of the Submit button. |
| Submit Button Text Color | The color of the Submit button text. |
| Selected Reply Background Color | The background color of the selected reply. |
| Selected Reply Text Color | The text color of the selected replay. |
| List Settings Set the options for displaying the List in the web chat panel. | |
| Title Text Color | The color of the list title text. |
| Title Font Size (px) | The font size of the list title text. |
| Title Height (px) | The height of the list title. |
| Title Background Color | The background color of the list title. |
| Subtitle Text Color | The color of the subtitle text. |
| Subtitle Font Size (px) | The font size of the subtitle text. |
| Subtitle Height (px) | The height of the subtitle text. |
| Subtitle Background Color | The background color of the subtitle text. |
| Image Max Width (px) | The maximum width of the image. |
| Image Max Height (px) | The maximum height of the image. |
| Carousel Settings Set the options for displaying the carousel in the web chat panel. | |
| Title Text Color | The color of the title text. |
| Title Font Size (px) | The font size of the title text. |
| Title Height (px) | The height of the title. |
| Title Background Color | The background color of the title. |
| Subtitle Text Color | The color of the subtitle text. |
| Subtitle Font Size (px) | The font size of the subtitle text. |
| Subtitle Height (px) | The height of the subtitle text. |
| Subtitle Background Color | The background color of the subtitle text. |
| Buttons Text Color | The color of the button text. |
| Buttons Background Color | The background color of the button. |
| Buttons Font Size (px) | The font size of the button text. |
| Buttons Height (px) | The height of the button. |
| Max Width (px) | The maximum width of the carousel. |
| Image Max Height (px) | The maximum height of the image. |
| Image Max Width (%) | The maximum width of the image. |
Saving customization as a new theme
- On the Themes page customize the theme options as per the requirement.
In the left pane, click Designer and click the Themes tab.
- Click the Save button.
- In the Theme Name field, enter the name of the new theme.
- (Optional) In the Description field, enter the description of the theme.
- Click the Save button.
Note: The Save button is enabled only after entering the theme name.
The new theme is added to the themes list.
Using the saved theme
Once you save your customizations as a theme, you can just select the required theme and use it for the web chat panel.
- Navigate to the Themes page.
In the left pane, click Designer and click the Themes tab. - Click the Themes button.
The Themes dialog box appears.
- Click the required theme and click the Use Theme button.
The Web Chat panel is updated as per the settings saved in the theme.
Clearing the selected theme
If you want to change the theme for the Web Chat panel, you can choose another theme from the Themes panel. However, you can clear the applied theme and set the default settings to the Web Chat panel.
Note: The Clear button is enabled only if any theme is applied to the Web Chat panel.
- Navigate to the Themes page.
In the left pane, click Designer and click the Themes tab. - Click the Clear button.
The Web Chat panel is reset to the default settings.
Deleting a theme
You can delete any unwanted themes from the list.
- Navigate to the Themes page.
In the left pane, click Designer and click the Themes tab. - Click the Themes button.
The Themes dialog box appears. - Click the bin icon.
- In the confirmation dialog box, click the Proceed button.
The selected theme is deleted from the list.