Add chat client to the Zoom Virtual Agent SDK for web

You can enable users to engage with agents directly through chat without leaving your web page.

Embed the chat client

You can use campaigns or an entry ID to embed the Virtual Agent SDK for web.

Campaigns

You can add a snippet of code one time, and then use the Campaign feature in the admin portal to choose which chat or bot to launch.

Campaign mode is currently available for web only. It's also available as a web view in iOS and Android apps.

To add Campaigns:

1. Sign into the Zoom web portal as a Virtual Agent Admin.
2. In the navigation panel, choose Virtual Agent, then select Campaigns.
3. To open the model, choose Embed Web Tag .
4. To enable campaigns on your website, copy the web tag and then embed it into each web page of your website.

Entry ID

You can use the Welcome Screen in your chat experience to collect user data before users can engage with the chatbot.

To do so, you must add an Entry ID. However, using the Entry ID in your Virtual Agent can lead to a lower volume of engagements due to additional user friction. We do not recommend this method unless absolutely necessary.

Note: To use Android and iOS SDKs for ZVA, you must have a Zoom Contact Center license to use its Android and iOS SDK. These SDKs contain ZVA components.

To add an Entry ID:

1. Sign in to the Zoom web portal as a Virtual Agent Admin.

2. In the navigation panel, choose Virtual Agent, then select your Bot.

3. In Bot Flows, open the bot's Main Flow.

4. Choose Start. Then select Manage Entry Point.

5. Choose Add Entry Point and select an entry ID for the SDK to use.

   For details, see Adding entry points to a flow.

   Note: Skip this step if you already have an entry point to use.

6. To display the Virtual Agent JS SDK code to copy to your site, select Install SDK.

Use the web SDK

This section shows you how to use HTML, JavaScript, and Development mode to add the web SDK on your web pages.

In addition, it shows you how to use advanced chat options, specific parameters, and Google Tag Manager to manage the web SDK.

HTML

You can directly import the web SDK through script tags and copy parameters directly in the admin backend.

<script
    data-apikey="your_apikey"
    src="https://us01ccistatic.zoom.us/us01cci/web-sdk/zcc-sdk.js"
></script>

When importing with script tags, data can be directly passed on the tag properties. It should be noted that the naming format needs to be converted, for example：

someParamItem → data-some-param-item

For the issue of using jQuery to load script tags and install web SDK, it cannot run properly. Perhaps the web SDK is unable to read the parameters and needs to add parameters globally. Define the parameters in the following way so that the web SDK can read the relevant parameters.

window.zoomCampaignSdkConfig = {
    env: "us01",
    apikey: "your_apikey",
};

JavaScript

You can import the web SDK through JavaScript scripts, and the import method and parameter setting method are as follows:

<script>
    (function () {
        const el = document.createElement("script");
        el.setAttribute("data-apikey", "your_apikey");
        el.src = "https://us01ccistatic.zoom.us/us01cci/web-sdk/zcc-sdk.js";
        document.body.appendChild(el);
    })();
</script>

Development mode

In development mode only, you can concatenate parameters directly after the URL.

https://xx.xx.com/test.html?apikey=your_apikey

Parameters

You can use these parameters to install the web SDK.

Advanced chat options

You can create your own button to start the chat client, as shown in this example.

<!-- Create your own button -->
<script
    data-chat-entry-id="GET_FROM_THE_CODE_COPIED_FROM_YOUR_FLOW"
    data-el="#chat"
    src="https://test.example.com/sample/web-sdk/video-client.js"
>
    /* The script source is the chat client JS SDK for Contact Center.
       Get this from the code copied from the flow. */
</script>

Google Tag Manager

When using Google Tag Manager, you can use this script:

<script>
     (function() {
       var el = document.createElement("script");
     el.setAttribute("data-apikey", "[REPLACE ME]");
     el.src ="https://us01ccistatic.zoom.us/us01cci/web-sdk/chat-client.js""document.body.appendChild(el);"
    })();
</script>

When you need to use advanced prioritization, see Prioritization in Google Support documentation.