Design a chat window

1. In 8x8 Configuration Manager menu, open Chat Design.
2. Select the Window tab.
3. Click or Add New Window.

4. Enter general information:

   • Name: Internal reference name
   • Description: Optional description

5. Configure chat window settings:

   • Window title: Enter a title for the chat window. (Up to 30 characters). This appears in the chat header; it defines how the chat is presented to users.
   • Allow customers to send attachments to agents: If enabled, the Attachment icon is shown in the conversation box.

   • Allow chat notifications: Enables visual and sound notifications.

     • If enabled, customers receive visual notifications for new messages. This also adds a Sounds option to the chat menu (in the chat header), which customers can use to turn sound notifications on or off independently.

     • Customers will receive both a visual and audio notification when a new web chat message arrives, even if they close or minimize the web chat window:

       • A new message alert highlights unread messages in the 8x8 webchat window. This alert will disappear once the message is read.

         

       • When sound notifications are enabled, an alert tone plays, and a visual notification appears in the website tab as well as in the web chat widget if the chat window is minimized or close.

         

   • Allow customers to keep session alive: If enabled, allows users to type before an agent joins, typically used when a bot is involved. Useful for testing bot interactions.Enables visual and sound notifications.

     Note: Changes are reflected immediately in the Preview.

6. Enable Co-browsing if required. It displays Start Co-browsing session in the chat window. For details on Co-browsing, see Co-browsing via Chat.

7. Customize colors:

   • Select the Use default colors checkbox to apply 8x8’s WCAG-compliant theme.
   • To customize, clear the checkbox and define your own header and button colors.

8. Customize Logo:

   • Click Choose Files to upload a logo (up to 200 kB). The logo is resized to 100×30 pixels.
   • Click Reset to remove the uploaded logo. It restores the default version (no custom images).
   • Enter a Logo label for accessibility (following WCAG accessibility standards)

9. Configure agent and chatbot identity:

   • Show agent avatar: Enable or disable agent avatar. If enabled, the agent's avatar appears in the chat header and next to the agent's name during web chat interactions.
   • Enter a Chatbot name. This name will be used in all interactions with the chatbot.

   • Upload a Chatbot avatar (optional) to customize how bot identities appear:

     • Click Choose Files to upload a bot avatar (up to 200 kB). The bot avatar is resized to 100×30 pixels.
     • Click Reset to remove the custom avatar. It restores the default version (no custom images). Preview updates immediately after reset.
     • Chatbot avatar label: Enter alt text describing the chatbot avatar for screen readers, following WCAG accessibility standards

   • Add a chatbot Bio:

     • Default bio: Add a bot description (up to 200 characters). This text will introduce your chatbot to customers.

     Note: The chatbot bio is visible only in bot mode.

10. Click Save to save your configuration. 

Important!: Enable Show conversation preview below the Preview window to see changes reflected in real-time. For details, see Use conversation preview.

You have defined all the Chat Visual Block (CVB) elements. The next step is to add them in a chat script to complete the workflow.

The Preview window updates in real time as you make changes. You can see how the user will see the conversation window.

To enable conversation preview:

• While configuring the chat window, enable the Show conversation preview toggle below the Preview window.
• The Bot mode allows customers to interact with the bot and agent.
• Review how the chat appears.

When conversation preview is enabled:

• Changes update instantly.
• Bot interactions are visible.

• The bot bio appears in the header of the chat conversation. Hover over the header and click See more to view it.

• Users can type before an agent joins (if enabled).

Note: The preview displays a mock conversation that updates based on your configuration.

To edit:

1. Go to Chat Design > Window.
2. Select the desired window and click Edit in the row.
3. Update settings and save.

To delete:

1. Go to Chat Design > Window.
2. Select a window.
3. Click Delete in the row and confirm.

After configuring your web flow, you may modify your chat window settings. Although you can do this within 8x8 Configuration Manager, it lacks the flexibility to theme all areas. You can adjust the theme related to the notification settings, including the size, colour, or position of the message badge or button. When changing the notification theme, remember to use a unified approach regarding the colour you use for all the chat window elements, such as buttons, wedges, etc.

See our API documentation to learn how to adjust the theming notification settings.

This section describes available configuration fields and their behavior.

Field name	Description	Behavior in preview
Window title	Title displayed in the chat header	Visible in the chat header (if bot or agent not displayed)
Name	Chat name used in the interface	Not shown to users
Description	Additional context for the chat	Not shown to users
Attachments	Enables file sharing	Shows Attachment icon
Chat notifications	Enables visual and sound alerts	Adds Sounds option in menu
Keep session active	Allow inputs before the agent joins	Input field enabled in preview
Chatbot name	Name used for chatbot identity	Displayed in the chat header and bot messages
Bot bio	Bot description (up to 200 characters)	Visible in bot mode (expanded view in the chat header)
Agent avatar	Displays agent image	Shown or hidden (when hidden, the logo is displayed on the header, but no image is used on the message bubble inside the conversation)
Bot avatar	Displays bot image	Shown or hidden (when hidden, the default bot image is displayed)
Preview toggle	Enables mock conversation preview	Activates the preview pane

• Displays a mock conversation
• Updates instantly when settings change
• Does not simulate backend logic

• Preview reflects current configuration before publishing
• Bot features appear only when enabled. For details, see Web chat interactions.