Customizing the chat engagement window

Zoom Contact Center admins can use chat campaigns to customize the design of the chat engagement window for consumers. The chat engagement windows displays after consumers click the chat invitation CTA. 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.

Requirements for customizing the chat engagement window

• Pro, Business, or Education account
• Account owner or admin privileges
• Zoom Contact Center license
• Campaign created with chat as one of the channels

How to customize the chat engagement window

1. Sign in to the Zoom web portal as an admin with the privilege to edit account settings.
2. In the navigation menu, click Contact Center Management then Campaign Management.
3. Click the display name of the chat campaign you want to customize.
4. In the Engagement Window for Web Chat section, click Create Engagement Window or click Edit to customize an existing window configuration.
5. 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": Allow consumers to download the chat transcript when the engagement has ended.
  • Enable "Email Transcript": Allow consumer to email the chat transcript when the engagement has ended. Consumers will only see this option if you enable the Email field in the Welcome Screen tab and the consumer enters an email.
• Header Bar: Enter text to display in the header bar of the window.
  • Image: Specify the avatar image that appears in the header bar. Use one of these options.
    • Select the default image, or select the option to not use an avatar image.
    • Click Upload Your Image to use a custom image, then click one of these tabs:
      • Your Computer: Click Upload File to upload an image from your computer, then click Next. Click and drag the crop area to determine which part of the image is shown. You can also click and drag the slider below the image to change the zoom level. Click Save when you're done cropping.
        Note: This image will not be added to asset library.
      • By URL: Enter an image URL, then click Save.
      • Choose from Asset Library: Select an image asset from the asset library, then click Next. Click and drag the crop area to determine which part of the image is shown. You can also click and drag the slider below the image to change the zoom level. Click Save when you're done cropping.
  • Background: Click the circle icon and select the background color of the header bar.
  • Enable Header Text: Select the check box to display a title and message in the header bar.
    • Title / Message: Enter text to display in the header bar. Use the editing tools to customize your text.
      Tip: For example, you can use the header text to embed URLs and link to privacy policies or terms of use.
• 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.
  • Customer'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/agent's chat 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 a custom text to be displayed on the call-to-action button or select from the assets library.
• 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.
• Button Text: 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, then click Next. Click and drag the crop area to determine which part of the image is shown. You can also click and drag the slider below the image to change the zoom level. Click Save when you're done cropping.
    Note: This image will not be added to 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.