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 then Virtual Agent.
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.
• Window Height: Click the drop-down list and select the desired window height for the chat modal.
  Note: The window width is fixed at 420px for best readability.
• 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.
  • Icon: Click the circle icon and select the color of the icon.
  • Enable Header Text: Select the check box to show header text.
    • Title: Click the circle icon to choose the text color of the title, then type a title in the message box.
    • Message: Click the circle icon to choose the text color of the message,  then type a message in the message box.
• Messaging font
  • Font: Click the drop-down menu and select a desired font from the 6 default options or upload your own font in Ttf file format.
  • Size: Click the drop-down menu and select the font size of the chat messages.
• Consumer messages
  
  • 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.
  • Consumer's link: Click the circle icon and select the color of the consumer's link.
• Brand messages
  • 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.
  • Brand's link: Click the circle icon and select the color of the brand's link.
• Quick Reply: Choose between outlined or filled. Selecting outlined will give the reply button a bordered look, while selecting filled will make the button solid.
  • Quick reply button alignment: Select Stacked, Inline, or Full Width display of the quick reply button. This does not change the alignment of other button types.
• Send button: Click the circle icon and select the color of the background or icon.
• Call to Action Button: Select the button and text color.
  
  • Button Text: Enter the text to be displayed on the call-to-action button.
• Knowledge base card
  • Font: Click the drop-down menu and select a desired font from the 6 default options or upload your own font in Ttf file format.
  • Background: Click the circle icon and select the color of the background.
  • Body Text: Click the circle icon and select the color of the body text.
  • Title: Click the circle icon and select the color of the title.
  • Hyperlink: Click the circle icon and select the color of the hyperlink.
  • Button: Click the circle icon and select the color of the 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.
• Button text: Enter the text to be displayed on the welcome screen button.
• 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.