Zoom CommunityCustomer Support

Customize User Chat Support Experience

Products

  • Zoom Contact Center

  • Zoom Virtual Agent

Prerequisites

Embed Campaign SDK on your website or mobile app

Overview

Your chat window is often the first real interaction a customer has with your company—whether they’re chatting with a virtual or live agent. With Zoom Contact Center and Zoom Virtual Agent, you have full control over how that experience looks and behaves on your website.

This guide walks you through all the tools available to help you design a chat experience that matches your brand, improves usability, and keeps customers engaged.

Create a Plan

Your chat UI should feel like a natural extension of your website or app. When planning your chat UI design, consider the following:

  • Colors: What are your company's primary and accent colors? Use these colors for different elements of your chat experience, such as the chat bubbles, icons, buttons, and background colors. You'll select colors using hex codes (for example #FFFFFF), so it's helpful to have your brand's codes handy.

  • Fonts: Match your site’s typography for consistency. You can select from several common fonts, or upload your own TTF file to add a custom font.

  • Logo: Consider adding your logo or company image to your chat experience. You can upload a JPG/JPEG, PNG, SVG, or GIF file up to 10MB. Depending on the chat design you choose, there are recommended image dimensions -- more on that below.

  • Avatar: An avatar is the picture representation of the bot or agent. For bot or system messages, use your logo or a character/avatar that represents your brand. Similar to favicons in web browsers, these icons are small but make a difference in the experience when matched well to the company brand. Avatars are 40x40 pixel size, and you can upload a JPG/JPEG, PNG, SVG, or GIF file up to 2MB.

The Parts

Zoom's Campaign Builder is used to customize both your chat design and its availability on your website or app.

In Campaigns, you'll set up:

  • Chat Engagement Window: Used by consumers to chat with your bot or agent. You can choose the design of all bubbles, buttons, icons, and header design. The chat window has a big impact on the overall look and feel of your digital support experience.

  • Location: Lets you control where your support should be available on your site (be sure to embed the Campaign SDK first). You can offer support across your entire site, or specify which pages should be included or excluded based on the URL.

  • Invitations: How your users launch or open your contact center on your business's website or app. There are two invitation types: Sticky and Embedded.

    • Sticky: A simple way to invite people to use your digital support. Users see an icon or widget on the screen which, when clicked, opens the support experience. You can control the color, shape, and icon, and even add text.

    • Embedded: With embedded invitations, you can turn any button or link on your website into a clickable link that opens support.

  • Proactive Messages: Greetings that you can use to send a message after your users visit a specified page for a specified amount of time. Proactive messages can be added to any Campaign using a Sticky Invitation type.

    For example: "Need help choosing a plan?"

In addition, you'll also set an avatar, which is the picture representation of the bot or agent. Your consumers will see these avatars of the bot or agent representing your brand.

Build Your Chat Experience

Learn more about building your chat experience, including sizing, images, designs, messaging, and additional configuration settings.

Build Your Chat Experience

Summary

Zoom Contact Center and Zoom Virtual Agent help you create a support chat that feels on brand and easy to use. You can fully customize the design, choose where and when chat appears, and add proactive messages to engage users at the right moment. Once the Campaign SDK is embedded, you can control everything from the Admin UI or with code. It’s flexible, clean, and built to fit your site.

You’re ready to launch a chat experience that helps your customers and represents your brand.

Related Resources

Last updated

Was this helpful?