Build Your Chat Experience

Zoom's tools make it easy to customize and launch your chat experience with little to no code.

Chat Engagement Window

The chat engagement window is how your users message with your virtual agent or human agent. With Zoom's tools, you can build a chat window that's easy to see and interact with and matches your company's brand.

To create or edit your Chat Engagement Window, go to Zoom's Web Admin.

From there click +Add Campaign or open the draft of an existing Campaign. Scroll to the Chat Engagement Window section to create or edit your window.

Window Size and Mobile Experience

Zoom's chat engagement window is responsive, which means it automatically adapts its layout if your user accesses your site from their desktop or smartphone.

On mobile devices, the chat window opens full screen to maximize limited screen space and ensure a clean, readable experience.

For users who access your chat on desktop devices, you can choose from three size options for window height:

• S: 540 pixels

• M: 650 pixels, Default

• L: 780 pixels

Header Bar

The chat header bar is a key element of your chat design. When designed thoughtfully, it gives users context about what to expect from their support experience and confidence in the conversation. You can use the header to share information about your support team and/or add your brand's logo or colors.

Zoom CX offers several header design options that you can choose from.

Full Header Image

Add a 426 pixel by 95 pixel image that take over the entire header space, great for custom designs.

Banner Image

Add a 394 pixel by 88 pixel image of your brand's logo or other design, useful for custom designs that make an impact. Consider adding a logo with a transparent background if you want to change the header bar color.

Avatar Image Size

Add a 40 by 40 pixel image to appear in the header bar to appear on it's own or alongside Header Text.

Header Text Only

Share a brief note about anything, such as your team's name, availability, or support hours. Control the size of the header text by using H1, H2, H3 or body paragraph size.

For a streamlined, minimalist design you can opt to keep it empty, focusing your users on the chat.

You can use select any color for the header background and icons, useful for tying in your chat design to your website.

Colors for your chat bubble, text, icons, and more

The engagement window builder lets you pick the exact colors you want for your chat. You'll enter hex codes for each part of the window and review the preview to see how it looks.

Zoom provides a template to get started. To keep things looking great (and easy to read), stick with your brand colors and make sure there's enough contrast between text and background colors.

Welcome Screen

The Welcome Screen in Zoom Contact Center and Zoom Virtual Agent is an optional introduction screen that appears before the chat begins, giving you a chance to greet your customers, collect information from them, and match the experience to your brand.

This is available for web chat experience. To configure, click the Chat Engagement window, then the Welcome Screen tab.

Invitation Design

The Invitation is what will launch the support experience on your website. It's most common to use the Sticky invitation type, which is a floating icon that appears on your website. When your users click it, the chat window will open and start their experience.

To create or edit an Invitation, go to Zoom's Web Admin.

From there, click +Add Campaign or open the draft of an existing Campaign. Scroll to the Invitation section to create a new invitation.

You can configure the following settings for your Sticky Invitation icon:

• Button Size: The size of your chat invitation icon should be large enough to be easily noticed and clicked or tapped, but not so large that it disrupts the user experience or covers important content. Zoom offers three Invitation sizes:

  • S: 40 pixels

  • M: 56 pixels, Default

  • L: 72 pixels

• Button Color: Choose a button color that has high contrast against your website background. We recommend following WCAG 2.1 guidelines, which is a minimum contrast ratio of 3:1 for user interface (UI) components, like icons and buttons, against their background.

• Icon: An icon can help your users get an idea of what they can expect when tapping the button. Zoom offers some default designs to choose from that indicate starting a chat. You can also add your own custom icon using an SVG file. SVG files must be less than 10MB.

• Corner Radius: How rounded or square do you want the invitation icon to be? Take a look at your website to see if your website has a pattern for how buttons look, or ask your brand team if they have a preference. Using a lower corner radius, like 8 pixels, will make your Invitation more square. A higher corner radius, like 28 pixels, will make your invitation more round.

• Add Text to Your Invitation: Adding a text label to an invitation button makes it more clear and inviting. Users instantly know the button’s purpose, so there is no guessing what the icon means. However, it also takes up more space and might clutter the screen, especially on mobile. Be sure to consider your audience and the devices they most commonly use. If adding a font, you can choose from pre-set font options Arial, Georgia, Tahoma, or Verdana; or upload your own custom font using a TTF file.

Invitation Location on the Page

The most popular location for a support invitation icon is the bottom-right corner, with an offset from the bottom and side of 20 pixels. This is typically easy to spot without blocking key content.

We recommend looking at your own website on both desktop and mobile. If your site already has a banner or button in this location, this could hurt your customer's usability or possibly disrupt user flows.

If you already have an element (like a cookie banner, navigation bar, or another widget) in the same spot as your chat invitation icon, consider changing the alignment left or right, or adjusting the offset from the bottom or sides.

You can also "Enable consumers to drag and move the invitation" to give your users even more flexibility to move the icon around the page.

Common Question

The chat invitation icon is blocking or distracting users on a particular page on mobile devices. What are my options?

Answer:

There are several ways you can achieve this.

• Option 1: Change the invitation icon's position on the page. You can move the placement of the invitation on the page using the offset and position options. This is configured by editing the invitation.

• Option 2: Show or hide the chat icon based on page location. If you want to remove the chat invitation entirely for all checkout pages, edit the Location to exclude the checkout pages. For example, you can exclude all pages containing "checkout" in the URL.

• Option 3: Set up targeting by device. If you don't want the invitation icon to appear on mobile sites, uncheck the "mobile phone" option under Campaign Targeting. To set up, click Campaign, Targeting.

Zoom Campaigns offers an Embedded invitation option if you don’t want to use the default sticky icon to launch chat. This lets you turn any element on your website, like a button in your menu or a link on a page, into a trigger for opening the chat window.

To do this, you create the element in your site’s HTML and use the Zoom Campaign SDK to connect it to the chat. When a user clicks that element, it launches the chat window and starts the campaign experience. You can also use existing HTML on your website to trigger the chat window if you prefer.

Proactive Messaging

What if you want a more active way to get your user's attention so that they chat with your team or virtual agent? Zoom's Proactive Messaging feature lets you configure allows businesses to initiate conversations with visitors, rather than waiting for the customer to start the chat by clicking the invitation.

How It Helps

• Better Engagement: You can grab people’s attention and offer help at the right time.

• More Leads: Custom messages and buttons can encourage people to learn more by chatting with an agent, or share their info for a follow-up call.

• Faster Support: Quickly connect visitors to a bot or live agent, so they get answers without delay.

When a user lands on a page where proactive messaging is enabled, they'll get a message and can click buttons to start a specific flow.

Where To Set It Up

This feature is set up under Campaigns, and is available for chat campaigns on web pages that use the Sticky invitation type.

Target Your Users

You can set your proactive message to have a delay, so it only appears for users who've been on that page for a specific amount of time. You can also choose whether you want the user to see the message only once in a 24-hour period, or if you want the proactive message to reappear if the user refreshes the page or visits another matching page.

Common Question

I want to have an invitation icon so my users can start a chat at any time, but also want to send my customers a proactive message on specific page (for example, my company's pricing page). How do I set this up?

Answer

You'll want to create two Campaigns: one for your standard invitation across your entire website ("Campaign A"), and another Campaign ("Campaign B") for the page where you want to have a proactive message.

For each Campaign, you'll want to define the Campaign Locations so that they don't overlap.

Avatars

An avatar is the image that appears next to the messages in web chat. It helps bring personality and branding to the conversation.

For messages sent before a user connects with an agent (for example, a welcome message or Virtual Agent), you can set a single default avatar across all your experiences, or you can set a unique avatar for each individual chat flow. This gives you the flexibility to keep things consistent or tailor the experience for different brands or use cases.

If you're using Zoom Contact Center, click the following:

1. Preferences

2. Consumer Experience

3. Default Flow Message Avatar and Name.

If you're using Zoom Virtual Agent only, click the following:

1. AI Studio

2. Virtual Agents

3. Chatbots

4. Settings

When your customer moves from the bot to a live agent in Zoom Contact Center, you can also control how the agent’s avatar appears. You can choose to show the agent’s profile picture from Contact Center, their initials, or a set avatar image.

To set up, click the following:

1. Preferences

2. Consumer Experience

3. Display Image

Additional Chat Configuration Settings

Control the Web Chat Window with Zoom Campaign SDK

The Zoom Contact Center (ZCC) and Zoom Virtual Agent (ZVA) Campaign SDK gives developers more control over how the web chat behaves and interacts with your website. It allows you to open, close, and control chat behavior programmatically based on user actions, page context, or custom logic.

For example, you can make it so your chat window opens automatically when your users have been on the page for a specific number of seconds or click a particular button.

See Zoom Developer Documentation SDK Reference for more details.

Site-Wide Chat Persistence

Chat persistence controls whether a user’s chat session continues as they move between different pages on your website.

• When persistence is enabled (default): The same chat stays open across pages, so the user can continue their conversation without interruption.

• When persistence is disabled: The chat does not continue when the user navigates to a new page, unless that page is explicitly part of the first campaign's defined location.

This change makes it easier for businesses with multiple brands or departments on the same domain to keep chat campaigns separate. It prevents users from carrying a chat between unrelated pages and reduces the need for manual setup.

Find this setting under Zoom Contact Center and Zoom Virtual Agent Preferences.

Sound Notifications

By default, when your agent or virtual agent sends a message in web chat, consumers hear a notification sound. If the default sounds feel disruptive to your brand experience, you can turn them off under Zoom Contact Center or Zoom Virtual Agent Preferences.

Consumers will still have the option to re-enable them in the chat menu, if they prefer.