Customizing the Zoom Virtual Agent campaign invitation button

While changing campaign settings, Zoom Virtual Agent admins can create or customize the campaign invitation button that consumers can click or tap to start an engagement. You can create or customize two types of buttons. The sticky invitation button floats above all other website elements. The embedded invitation button is contained in a specific location on a website. You can further customize the embedded invitation button using CSS implemented on your website.

This article covers:

• How to create or customize a sticky campaign invitation button for Zoom Virtual Agent
• How to create or customize an embedded campaign invitation button for Zoom Virtual Agent

Prerequisites for customizing the campaign invitation button for Zoom Virtual Agent

• Account owner or admin privileges; or relevant role/privilege
• Basic, Pro, Business, Education, or Enterprise account
• Zoom Virtual Agent license
• Campaign created

How to create or customize a sticky campaign invitation button for Zoom Virtual Agent

1. Sign in to the Zoom web portal.
2. In the navigation menu, click AI Management then Virtual Agent.
3. Click the Campaigns tab.
4. Click the display name of the campaign you want to customize.
5. In the Invitation section, select Sticky in the drop-down menu located in the top-right corner.
6. Click Create Invitation, or hover over an existing button and click Edit to customize an existing configuration.
7. Customize these settings:
   • Name: Enter an internal display name for the invitation button.
   • Customization section
     • Button: Select the size of the button. Click the circle icon next the the drop-down menu to change the color of the button.
     • Border: Select the roundness of the button's corners. A high number means the corners are more rounded.
     • Font: Select the font type of the invitation button text. Click the circle icon next the the drop-down menu to change the color of the text.
     • Text: Specify the text to display in the invitation button.
8. Click Save.

How to create or customize an embedded campaign invitation button for Zoom Virtual Agent

1. Sign in to the Zoom web portal.
2. In the navigation menu, click AI Management then Virtual Agent.
3. Click the Campaigns tab.
4. Click the display name of the campaign you want to customize.
5. In the Invitation section, select Embedded in the drop-down menu located in the top-right corner.
6. Click Create Invitation, or hover over an existing button and click Edit to customize an existing configuration.
7. Customize these settings:
   • Name: Enter an internal display name for the invitation button.
   • Placement: Enter an element ID used to generate the HTML for the embedded invitation button. After entering an ID, click Generate Code to generate HTML you can copy and paste into your website. For example, entering chat-button will generate <div id="chat-button"></div>
8. Under Placement HTML Code, enter the HTML and CSS for your button.
9. Copy and paste the placement div tag into your website.
10. Copy and paste the placement HTML and CSS code into your website within the placement div tags.
11. Click Save.

Example

The following code blocks show a simple HTML button. You can further customize the design by using CSS.

Placement div tag: 

<div id="chat-button"></div>

Placement HTML code:

<button type="button">Contact us</button>

HTML code to implement on website:

<div id="chat-button">
   <button type="button">Contact us</button>
</div>