Zoom Virtual Agent admins can use chat campaigns to customize the design of the chat engagement window for consumers. The chat engagement window displays after consumers click the chat invitation call-to-action. You can customize the colors, header text, and welcome screen displayed to consumers.

The chat engagement window is responsive so that consumers can start chat engagements on mobile devices. They can also minimize or expand the chat engagement window.

Prerequisites for customizing the chat engagement window for Zoom Virtual Agent

• Account owner or admin privileges; or relevant role/privilege
• Basic, Pro, Business, Education, or Enterprise account
• Zoom Virtual Agent license
• Campaign created with chat as one of the channels

How to customize the chat engagement window for Zoom Virtual Agent

1. Sign in to the Zoom web portal.
2. In the navigation menu, click AI Management and then Virtual Agents.
3. Click the Campaigns tab.
4. Click the display name of the campaign you want to customize.
5. In the Engagement Window for Web Chat section, click Create Engagement Window or click Edit to customize an existing window configuration.
6. Customize these settings, then click Save.

Design tab

• Name: Enter an internal display name for the engagement window.
• Description (Optional): Enter an internal description for the engagement window.
• More Options
  • Enable "Download Transcript": Select the check box to save a record of conversation as a transcript file.
  • Enable "Email Transcript": Select the check box to send a copy of the conversation or interaction transcript to a specified email address, which can be useful for archiving or sharing records of discussions.
• Header Bar: Enter text to display in the header bar of the window.
  • Image: Choose whether you want the chatbot to use an avatar. Select the avatar icon and click Upload Your Image to add your desired image.
  • Image Size: Set the avatar size to (40px*40px) or full size.
  • Background: Click the circle icon and select the background color of the header bar.
  • Text: Click the circle icon and select the text color of the header bar.
• Message
  • Consumer's bubble: Click the circle icon and select the color of the consumer's chat bubble.
  • Customer's text: Click the circle icon and select the color of the consumer's text.
  • Brand's bubble: Click the circle icon and select the color of the brand/agent's chat bubble.
  • Brand's text: Click the circle icon and select the color of the brand/agent's chat bubble.
  • Size: Click the drop-down menu and select the font size of the chat messages.
  • Font: Click the drop-down menu and select the font type of the chat messages.
• Call to Action Button
  • Button Color: Click the circle icon and select the color of the call-to-action button.
  • Button Text: Enter the text to be displayed on the call-to-action button.
  • Text Color: Click the circle icon and select the color of the text displayed within or on the call-to-action button.

Welcome Screen tab

Select Enable welcome screen to enable welcome screen for the chat engagement window, then customize these settings:

• Font: Click the drop-down menu and select the font type of the welcome screen.
• Header: Enter text to display in the header of the welcome screen.
• Button Color: Click the circle icon and select the color of the button used to submit the consumer's information.
• Text Color: Click the circle icon and select the color of the button text.
• Background Image: Click Upload Your Image to customize the background image of the welcome screen, then click one of these tabs:
  • Your Computer: Click Upload File to upload an image from your computer. Hover over the image, then click and drag the crop area to determine which part of the image is shown in the welcome screen. Click Add when you're done cropping.
    Note: This image will not be added to the asset library.
  • By URL: Enter an image URL, then click Add.
  • Choose from Asset Library: Select an image asset from the asset library, then click Add.
• Fields: Select the fields to display on the welcome screen, then select which fields are required.
• Note: Values entered by consumers will be stored in the corresponding global consumer variables so they can be referenced in the flow. For example, the First name field will be stored in the firstName variable.