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:

• Sticky invitation button: The sticky invitation button floats above all website elements, like on an e-commerce site where you want visitors to subscribe or chat with support. It stays visible as they scroll, making it easy to engage and boosting user interaction.
• Embedded invitation button: This embedded invitation button is contained in a specific location on a website. You can further customize it using CSS implemented on your website. For example, if you have a blog and want readers to give feedback or ask questions, you can put this button at the end of each post and customize it with CSS to match your site's look. When readers finish an article, they can click the button to get in touch or offer feedback.

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
• Zoom Virtual Agent Web SDK implemented on the website using the Embed Web Tag available in the top-right corner of the Campaign Management page

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.
   • Style 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.
     • Icon: Select an icon to display or click Add icon to upload a custom icon.
     • Corner Radius: 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.
   • Location: Select whether the button will appear on the left or right side of the screen.
     • Right offset (px): Define the number of pixels from the right edge of the screen to position the button.
     • Bottom offset (px): Define the number of pixels from the bottom edge of the screen to position the button. 
     • Enable consumers to drag and move the invitation: Select this option to allow consumers to drag and move the invitation button freely across the screen.
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 the embedded invitation settings.

 Embedded invitation settings

• Name: Enter an internal display name for the embedded invitation.
• Embed HTML elements into my website: Selecting this option will allow admins to enter HTML code and the location where that code should be injected when the campaign loads on the website. This option can be useful for embedding invitations into custom areas of a webpage, such as a dropdown menu, navigation menu or in contextual location elsewhere on the webpage.
  • Embed HTML Code: Enter HTML code that should be injected on the website when the campaign loads.
    Note: The HTML code will be rendered within an iframe for security purposes. Only HTML and CSS is allowed.
  • Location: Enter the element ID of the element where the provided HTML code should be rendered.
    Note: The element ID entered must match exactly to the element ID on the website. It’s recommended to have the provided HTML code render within an empty div element with the corresponding element ID.
  • Generate Code (Optional): After entering the element ID in the location field, click Generate Code to generate a div element with the element ID provided.
    Note: If the element already exists on the website, this step is unnecessary. If the element doesn’t already exist on the website, the resulting code can be copied and given to a web developer to place in the appropriate place on the website.
• Use existing HTML on my website: Selecting this option will allow you to specify existing elements on their website so that they become an invitation for the campaign.
  • Button. Select the Button radio option. Enter the element ID of the button element that should become the invitation for the campaign.
  • Link: Select the Link radio option. Click the drop-down menu to select the identifier that will be used to find the link element on the website.
    • Element ID: Enter the element ID of the link element that should be targeted and made the invitation for the campaign.
    • Href value: Enter the href value of the link element that should be targeted and made the invitation for the campaign.
    • Attribute Selector: Enter a valid CSS attribute selector.
      Note: If multiple link elements have the same href value, each one will become updated and made the invitation for the campaign.
• Hide minimized window: Select this option to allows consumers to resume the chat by clicking on the original HTML asset again.

Example of embedded HTML element

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>