Share via

Customize Web Chat appearance with Webchat Playground

Webchat Playground helps you customize the appearance and behavior of your copilot agent Web Chat. The intuitive user interface lets you modify colors, fonts, thumbnails, and more to match your brand's identity. This article describes how to use Webchat Playground to create and manage themes and export styles as JSON or HTML.

Webchat Playground UI

Webchat Playground's user-friendly interface helps you define the look and feel of your Web Chat. You can easily make adjustments and see real-time previews of your changes.

The interface has three main areas:

  1. The left pane shows saved themes with their primary, secondary, and accent colors. Select a theme to edit or preview it.

  2. The middle pane provides a preview of the selected theme or the theme you're editing.

  3. The right pane lets you toggle between JSON and Code Snippet tabs. The JSON view provides the current styles in a JSON array, which you can paste into an existing Web Chat. The Code Snippet view contains sample HTML of a Web Chat with the styles embedded.

Screenshot of the Webchat Playground UI showing the available themes, the preview pane, and a JSON snippet.

This example of the UI shows:

  1. In the left pane, the style editor where you edit or create a theme.

    Sections include General, Send Box, Suggestion Box, Avatar, and Bubble. The editor also includes an accessibility checker for all applicable sections. You save and delete actions at the top.

  2. In the right pane, the Code Snippet tab displaying sample HTML. Switch to the JSON tab to see sample JSON.

Screenshot of the Webchat Playground UI showing the theme style editor, preview pane, and the Code Snippet tab.

Use predefined themes or create your own

Webchat Playground offers predefined themes that show different customization options for the Web Chat experience. These themes give you a starting point when designing a new theme. You can also create new themes to meet your specific needs and save them for future use.

Preview a theme

Select a theme from the left pane (where the colors are shown) to open the Webchat Preview.

Create a new theme

To create a new theme:

  1. Select Add a theme from the left pane.
    The left pane becomes a style editor where you can make modifications.
  2. Enter a name for the theme.
  3. Select Save.

Edit a theme

To edit an existing theme:

  1. Select the pencil icon next to the theme name in the left pane.
  2. Make modifications in the style editor.
  3. When you're done, select Save.

Delete a theme

To delete an existing theme:

  1. Open the theme in edit mode.
  2. Select the delete (trash can) icon at the top.

Export styles

To export styles:

  1. Select the theme you want from the theme selector.
  2. Select the JSON tab in the right pane.
  3. Copy all the text in the view and paste it into your Web Chat HTML using the styleOptions variable.

Export the HTML snippet

To export the HTML snippet:

  1. Select the theme you want from the theme selector.
  2. Select the Code Snippet tab in the right pane.
  3. Save all the HTML markup in the view as a file with an .html extension.
  4. Upload the HTML file to the web server.

Sample HTML

The sample HTML snippet features a floating widget Web Chat control with the selected styles applied.

Screenshot of the Web Chat floating widget with custom styles applied.

  • Last updated on