Customizing campaign invitations

While changing campaign settings, Zoom Contact Center admins can create and customize the type of invitation they would like to use for their campaign. The purpose of the invitation is to provide a call to action to the consumer to engage with the campaign.

You can create or customize two types of invitations:

• Sticky Invitation: An invitation button that floats above all other website elements and is located in the lower-right corner of the webpage. You can customize the button color/text of the button.
• Embedded Invitation: 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 option provides more flexibility for customers that need to have their campaign invitation appear in other locations, for example, to be embedded within a certain area/menu. This option can also be used to match the website theme/style for scenarios where the sticky invitation does not provide enough customization options.

This article covers:

• How to create or customize a sticky campaign invitation
• How to create or customize an embedded campaign invitation
  • Embedded invitation settings
  • Example of embedded HTML element

Prerequisites for customizing the campaign invitation

• Account owner or admin privileges
• Pro, Business, or Education account
• Zoom Contact Center license
• Campaign created
  Note: Embedded invitations are only supported on single-channel campaigns. Multichannel campaigns only support sticky invitations.
• Zoom Contact Center 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

1. Sign in to the Zoom web portal.
2. In the navigation menu, click Contact Center Management then Campaign Management.
3. Click the display name of the campaign you want to customize.
4. In the Invitation section, select Sticky in the drop-down menu located in the top-right corner.
5. Click Create Invitation, or hover over an existing button and click Edit to customize an existing configuration.
6. 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.
7. Click Save.

How to create or customize an embedded campaign invitation

1. Sign in to the Zoom web portal.
2. In the navigation menu, click Contact Center Management then Campaign Management.
3. Click the display name of the campaign you want to customize.
4. In the Invitation section, select Embedded in the drop-down menu located in the top-right corner.
5. Click Create Invitation, or hover over an existing button and click Edit to customize an existing invitation configuration.
6. Customize the embedded invitation settings. 
7. Click Save.

Embedded invitation settings

• Name: Enter an internal display name for the embedded invitation.
• Embed HTML elements into my website: Selecting this option will allow contact center 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.
      Note: If multiple link elements have the same href value, each one will become updated and made the invitation for the campaign.

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>