Customize Proactive Chat Pop-Ups

Customizable pop-ups for Proactive Chat offer more flexibility and options than basic pop-ups. These pop-up options are available for Live Chat Agents and contacts interact on a real-time basis and Chat Messaging Asynchronous chat in which contacts send a chat message anytime and wait for a reply channels A way for contacts and agents to interact, such as voice, email, chat, social media, and so on.. You can specify: 

• What page on your website the pop-up appears on.
• When the pop-up appears. You can configure certain events that trigger a pop-up to appear. Events can include things like a webpage visitor spending a certain amount of time on a page, or having a certain number of items in their shopping cart.
• What the pop-up looks like. There are many options for customizing the appearance of advanced pop-ups, including text color, border color, border images, and pop-up location.

Tag Manager Applications

To use customizable pop-ups, your website must have a tag A snippet of code placed in the HTML code for a website, which is used by Tag Manager applications. It's different from HTML code tags or tags in social media contexts. manager application. Tag managers are applications that can "watch" website visitors and trigger an action to happen in response. In the case of Digital First Omnichannel, the tag manager application triggers a pop-up to appear for a visitor.  You can use Google Tag Manager or another tag manager, such as Tealium.

In the tag manager, you define the events and conditions that you want to cause pop-ups to appear to website visitors. The conditions allow you to be very specific about when the pop-up appears. For example, if you define the event as the visitor scrolling down a page, you might not want the pop-up to appear to every visitor that scrolls on the page. You might want the pop-up to appear only to visitors who scroll more than halfway down the page. You can set that as the condition for the page scrolling event.

In Digital First Omnichannel, you create a workflow automation job with a trigger that links the job to the tag manager event you defined. The job is where you can customize the pop-up appearance.

This what happens when a website visitor is on a webpage where you've configured a pop-up to appear:

1. A website visitor performs an action that meets the conditions you established in the tag manager.
2. The tag manager contacts Digital First Omnichannel via API APIs allow you to automate certain functionality by connecting your CXone system with other software your organization uses..
3. The Digital First Omnichannel workflow automation job linked to the tag manager event that was triggered runs and displays the pop-up to the visitor on the webpage they're visiting.

Advanced Pop-Up Requirements

To use advanced Proactive Chat pop-ups, you must have: 

• A website for your organization—The website needs to have a script for your tag A snippet of code placed in the HTML code for a website, which is used by Tag Manager applications. It's different from HTML code tags or tags in social media contexts. manager application and a Digital First Omnichannel chat widget script.
• An account for your tag manager application—You can use Google Tag Manager or another tag manager application, such as Tealium.
• Digital First Omnichannel routing The system uses routing queues to determine which agents to route cases to. Your system administrator creates routing queues so that certain cases are routed to agents with expertise in that type of case.—Routing in Digital First Omnichannel needs to be configured for Live Chat or Chat Messaging as necessary.
• Advanced Pop-Ups enabled—Contact your CXone Account Representative to have this feature enabled for your organization.

Tag Manager Preparation

You need to set up your tag A snippet of code placed in the HTML code for a website, which is used by Tag Manager applications. It's different from HTML code tags or tags in social media contexts. manager application to watch for the events and conditions that you want to cause Digital First Omnichannel pop-ups to appear on your website. In the tag manager, you need to configure: 

• Trigger Event—The occurrence that the trigger "watches" for as people browser your website.  Tag managers offer a wide variety of options for events that a trigger can watch for. For example, you can choose viewing a certain webpage, clicking certain links, scrolling to certain parts of a page, or the amount of time spent on a page.
• Trigger Conditions—The specific details about the trigger event. These details help the tag manager decide which occurrences it needs to act on. For example, you can specify how far down the page someone must scroll, the specific links a visitor must click, or how much time they must spend on the page.
• Tag—The tag contains information about what the tag manager should do when the trigger event happens and the conditions are met. For Digital First Omnichannel Proactive Chat pop-ups, you will use a Custom HTML tag that contains a snippet of script code that allows the tag manager application to communicate with Digital First Omnichannel. The code to use in the custom HTML is:

where [TRIGGER ID] is the ID number of the Digital First Omnichannel workflow automation trigger you create. You can find the ID in the URL of the trigger when you're viewing it in edit mode in Digital First Omnichannel.

Create a Workflow Automation Pop-Up Job

Following these steps allows you to customize a chat pop-up based on a template.

1. In the Digital First Omnichannel portal, click Settings > Automation > Jobs.

2. Click Add.

3. Enter a Name for the job and select Chat Popup Box from the Action drop-down.

4. In the Parameters section, enter a Popup box name.

5. Select the Template that you want to use for the layout of the pop-up box. Examples of each template appear beneath the Template drop-down list.

   Learn more about fields in this step

   Field	Details
   Full Image - without other content	The pop-up contains only an image with no other content. Provide an URL for the image you want to use with this template in Image field in the Content section.
   Image - Left	The pop-up has a small image on the left side of the window, with text to the right of the image.  You can include a call to action with this template. Provide all information in the Content and Call to Action sections, as desired.
   Image - Right	The pop-up has a small image on the right side of the window, with text to the left of the image.  You can include a call to action with this template. Provide all information in the Content and Call to Action sections, as desired.
   Image - Top Center	The pop-up has a small image centered at the top of the window, with text below the image.  You can include a call to action with this template. Provide all information in the Content and Call to Action sections, as desired.
   Dynamic Image Bottom	The pop-up displays a dynamic image at the bottom. A dynamic image is specially-created with elements that move in some way. Provide all information in the Content and Call to Action sections, as desired.
   Circle Image Top	The pop-up has a small image in a circle, centered at the top of the window, with text below the image.  You can include a call to action with this template. Provide all information in the Content and Call to Action sections, as desired.

6. In the Content section, configure the text and image used in the pop-up.

7. Select Enable from the Show call to action drop-down if the template you selected supports a call to action and you want to include one in this pop-up. Enter the Call to action text.

8. In the Design Customization section, customize the appearance of the pop-up's size, background, borders, and text. If you include colors, you don't need to include CSS tags, such as background-color.  You only need to include the color name, HEX number (including the number sign (#)). RGB setting, or other CSS-supported method of defining colors.

   View image

   
   Learn more about fields in this step

   Field	Details
   Width	Enter the width for the pop-up in pixels (px). For example, 50.
   Height	Enter the height for the pop-up in pixels (px). For example, 100.
   Space between text	Enter a number to determine how spaced out the text should be in pixels (px). For example, 5.
   Background color	Enter the background color of the pop-up window. For example, #00f5gn.
   Background image	Enter the URL for a publicly-hosted image that you want to use as the background image in this pop-up window. Digital First Omnichannel displays a background image over the background color, if you specify both attributes.
   Border size	Enter a number of pixels for the width of the pop-up window's border. Digital First Omnichannel uses pixels as the default unit. You don't need to specify a unit.
   Border color	Enter the color of the pop-up window's border. For example, rgb(0,0,255).
   Border radius	Enter a number of pixels for the radius of the pop-up window's radius. Digital First Omnichannel uses pixels as the default unit. You don't need to specify a unit.
   Headline color	Enter the color for the Headline (H1) text. For example, red.
   Secondary Headline color	Enter color for the Secondary heading (H2) text. For example, #fff.
   Main body text color	Enter the color of the Main body text. For example, rgb(0,0,255).
   Call to action text color	Enter text color of the Call to action text. For example, #00ff00.
   Call to action background color	Enter CSS code to define the background color of the call to action area. For example, For example, linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 100%).

9. If you want to define where the pop-up window appears, select the location on the page from the Positiondrop-down. You can further modify the location of the pop-up by entering a number of pixels in the Offset X and Offset Y text boxes.

   Learn more about fields in this step

   Field	Details
   Offset X	The pop-up's location shifts horizontally by the number of pixels you specify. Use negative numbers to move the pop-up to the left and positive numbers to move it to the right.
   Offset Y	The pop-up's location shifts vertically by the number of pixels you specify. Use negative numbers to move the pop-up down, and positive numbers to move it up.

10. If you have defined custom fields in Digital First Omnichannel that you want to include in the pop-up, select a field from one or more of the Custom Field drop-downs and enter the text that you want Digital First Omnichannel to use for the field.
11. Click Save.

Create a Job for HTML Pop-Up

Following these steps allows you to create your own pop-up without being restricted to a template. You can add more customized elements such as buttons, forms, links, and more.

1. In the Digital First Omnichannel portal, click Settings > Automation > Jobs.

2. Click Add.

3. Enter a Name for the job and select Chat Popup Box Htmlfrom the Action drop-down.

4. In the Parameters section, enter a Popup box name, Custom design, and Custom JS.

   Learn more about fields in this step

   Field	Details
   Custom design	Enter custom html without an <html> or <body> tag. Be sure to specify the size of the pop-up with width and height element styles.
   Custom JS	Enter custom JavaScript if your pop-up will use any.

5. If you want to define where the pop-up window appears, select the location on the page from the Positiondrop-down. You can further modify the location of the pop-up by entering a number of pixels in the Offset X and Offset Y text boxes.

   Learn more about fields in this step

   Field	Details
   Offset X	The pop-up's location shifts horizontally by the number of pixels you specify. Use negative numbers to move the pop-up to the left and positive numbers to move it to the right.
   Offset Y	The pop-up's location shifts vertically by the number of pixels you specify. Use negative numbers to move the pop-up down, and positive numbers to move it up.

6. Click Save.

Create a Job for Welcome Message with Pop-Up

This job functions slightly different than the others. With this job, rather than just a pop-up, a chat window opens and displays a welcome message.

1. In the Digital First Omnichannel portal, click Settings > Automation > Jobs.

2. Click Add.

3. Enter a Name for the job and select Chat Welcome Message from the Action drop-down.

4. In the Parameters section, enter a Welcome Message name.

5. In the Content section, enter the text for the welcome message.

6. In the Handover section, if you have defined custom fields in Digital First Omnichannel that you want to include in the pop-up, select a field from one or more of the Custom Field drop-downs and enter the text that you want Digital First Omnichannel to use for the field.

7. Click Save.

Create a Workflow Automation Trigger

1. Click Settings > Automation > Triggers.
2. Click Add Trigger.
3. Enter a Name for the trigger.
4. Select Triggered by API as the Event.
5. From the Data type drop-down list, select Chat Window.
6. If you want Digital First Omnichannel to delay the appearance of the pop-up by an additional amount of time, enter the number of seconds you want it to wait in Delayed execution.
7. If you use folders to organize your workflow automation triggers, select the folder you want to store this trigger int from the Folder drop-down.
8. Click Save.
9. On the Triggers page, locate the trigger you just created and click Jobs.
10. Select a job from the drop-down list and click Add. Return to the Triggers page.

11. If you want to add conditions to the trigger, click Conditions for the trigger you created, then select the Probability of execution from the drop-down list and click Save.

    Learn more about fields in this step

    Field	Details
    Probability of execution	The percentage chance that Digital First Omnichannel will display the pop-up when the job triggers. If you select 100%, Digital First Omnichannel displays the pop-up every time the job is triggered. If you select 50%, Digital First Omnichannel there's a 50% chance that Digital First Omnichannel will display the pop-up when the job is triggered.

12. Click Activate. After you activate the trigger, ensure that you have fully configured your tag manager, including adding the script to the Custom HTML tag.