Add chat client to the Zoom Virtual Agent SDK for web

You can embed the Virtual Agent web SDK on your website to let users interact with a Virtual Agent without leaving your site.

Choose one of the following methods to configure how the chat experience starts:

• Campaigns: Manage and launch chat experiences from the Zoom admin portal without changing your website code
• Entry ID: Specify the bot flow that starts the chat and optionally display a Welcome Screen before the conversation begins

After you configure the chat experience, embed the SDK on your website using HTML, JavaScript, or Google Tag Manager.

Embed the chat client

Choose Campaigns or Entry ID to configure how the Virtual Agent web SDK starts the chat experience.

Campaigns

Use Campaigns when you want to manage which chat experience launches from the Zoom admin portal. Add the SDK snippet to your website once, then use Campaigns to choose which chat or bot to launch.

Campaigns are available for web applications and 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

Use an Entry ID when you want the SDK to start a specific bot flow. You can also use an Entry ID with a Welcome Screen to collect user information before the user interacts with the chatbot.

Using a Welcome Screen adds user friction and can reduce engagement. Use an Entry ID only when your chat experience requires it.

Note: To use Android and iOS SDKs for Zoom Virtual Agent, you must have a Zoom Contact Center license to use its Android and iOS SDK. These SDKs contain Zoom Virtual Agent 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

You can add the web SDK to your web pages using HTML, JavaScript, or Development mode. You can also configure SDK parameters or use Google Tag Manager to manage the SDK.

HTML

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

<script
    type="module"
    data-apikey="your_apikey"
    src="https://test.example.com/sample/web-sdk/zcc-sdk.js">
</script>

When importing with script tags, you can directly pass data on the tag properties. Note that the naming format needs to be converted, for example：

someParamItem → data-some-param-item

If you use jQuery to load the script and install the web SDK, the SDK might not read the parameters correctly. Define the parameters globally so the web SDK can access them. Use the following configuration:

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

JavaScript

Import the web SDK with JavaScript. Use the following import and parameter setup methods. The values shown are examples. Replace them with the values from the campaign script.

<script>
(function () {
    const el = document.createElement('script');
    el.type = "module";
    el.setAttribute('data-apikey', 'your_apikey');
    el.src = "https://test.example.com/sample/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.

Google Tag Manager

When using Google Tag Manager to load the web SDK, you can use this script:

<script>
 (function() {
   var el = document.createElement("script");
   el.type = "module";
   el.setAttribute("data-apikey", "[REPLACE ME]");
   el.src ="https://test.example.com/sample/web-sdk/chat-client.js";
   document.body.appendChild(el);
})();
</script>

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