Chat Buttons Floating

Prerequisites

Make sure you have a Bold360/Genesys DX account and a Genesys Cloud account.
Note: If you do not have a Bold360/Genesys DX and/or a Genesys Cloud account, please contact your Genesys representative.
Your Genesys cloud org should already have a messenger deployment with Predictive Engagement enabled.
You can read about how to set up Genesys Messenger here.
Make sure you have a chat window created on your website. You can read about how to set up a chat window here.

Process

Create an OAuth client in Genesys Cloud
You can find the process of creating an OAuth client in Genesys here.
Follow the referred process and make sure to select Token Implicit Grant (Browser) as Grant Type.
Obtain your Bold360 account ID
Your Bold360 ID is necessary to add the Genesys DX proactive chat integration to Genesys Cloud.
1. Open the Bold360 admin.
2. Navigate to Channels > Chat > Chat Buttons (Floating). In Chat buttons, click on the Chat button you want to use.
3. Click HTML.
4. Click Generate HTML and copy the account ID from the generated HTML. Save this ID for the next steps.
Add the Genesys DX proactive chat integration to your Genesys Cloud organization
1. In the Genesys Cloud top ribbon, click Admin.
2. Under Integrations, click Integrations, and search for DX.
3. Click Install.
4. In Details, rename the integration if necessary, and then click the Configuration tab.
5. Paste the previously obtained Bold360 account ID in the Account ID field.
Create an API trigger in Bold360
This API trigger defines the conditions of an API call to be invoked in order to activate the predictive engagement of the selected Bold360 chat button.
1. Create a new API setting. Name it “GPE+DX” and click Save.
  
  Follow the API trigger creation process described here. See Task 2: Create an API trigger.
  During the process, make sure to set the following:
  In General:
  API Key: Settings Key for Customer Journey Embed
  Item type: Chats
  URL Type: Agent button
  View: Embedded
  In Parameters, select VisitInfo in FIELD.
Create an action map in Genesys Cloud
1. Create a segment which defines customer characteristics that you want to engage.
2. Create an action map: follow the process described here.
  During the process, make sure to set the following:
  1. In Configure trigger type, select Genesys DX Bold Chat. The Bold360 Open Action Schema pops up.
  2. In Bold360 Open Action Schema:
    1. Select the Bold360 Account ID you have added to Genesys Cloud in Step 3 from the dropdown menu.
    2. Obtain the Chat button ID and the Website ID from Chat button (Floating) HTML in the Bold360 admin and paste them in the respective fields. Click Finish.
  3. In Set up Trigger, click Select Segments and select the segment you have created in the first step. Click Done.
    
    Note: Optionally, you can create outcomes before creating the action map. Read more about outcomes here.

Creating the iFrame

Host the following HTML file and make it publicly available.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<title>Customer Journey Embed</title>
</head>
<body>
<ul id="data"></ul>
<p id="status"></p>




<script type="text/javascript">
const authStorageKey = 'bold_agent_genesys_cloud_auth';
const redirectStateStorageKey = 'bold_agent_redirect_state';
const region = getQueryVariable('region');
const environment = getQueryVariable('environment'); // likely to be undefined most of the time

function redirectToLoginPage() {
const redirectUri = getQueryVariable('redirectUri');
const domain = genesysCloudDomainForRegion(region, environment);
const clientId = getQueryVariable('clientId');

const loginUrl = `https://login.${domain}/oauth/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}`;

saveRedirectState();

window.location.href = loginUrl;
}

function getAuthData() {
let item;
try {
const itemStr = localStorage.getItem(authStorageKey) || '{}';
item = JSON.parse(itemStr);
} catch (err) {
console.error('Could not deserialise auth data', err);
return {};
}

return item;
}

function setAuthData(authData) {
return localStorage.setItem(authStorageKey, JSON.stringify(authData));
}

function getSavedRedirectState() {
return localStorage.getItem(redirectStateStorageKey);
}

function saveRedirectState() {
localStorage.setItem(redirectStateStorageKey, window.location.search);
}

function clearRedirectState() {
localStorage.removeItem(redirectStateStorageKey);
}

function exec() {
const hashParams = new URLSearchParams(window.location.hash.slice(1));
let authData = parseAuthParams(hashParams);

if (isAuthValid(authData)) {
setAuthData(authData);
window.location.hash = '';
} else {
authData = getAuthData();

if (!isAuthValid(authData)) {
console.log('redirecting to login page')
redirectToLoginPage();
return;
}
}

let queryParamsStr = window.location.search;
const savedQueryParams = getSavedRedirectState();

if (savedQueryParams) {
queryParamsStr = savedQueryParams;
clearRedirectState();
}

const queryParams = new URLSearchParams(queryParamsStr);

// customerId is passed in the VisitInfo custom parameter from Bold360
const customerId = queryParams.get('VisitInfo');
if (!customerId) {
$('#status').text('No customerId found..');
return;
}

redirectToGadget(customerId, authData.accessToken, queryParams.get('region'));
}

function isAuthValid(authData) {
return authData && authData.accessToken && authData.expirationTime && authData.expirationTime > Date.now();
}

function parseAuthParams(params) {
const auth = {};

if (params.has('access_token')) {
auth.accessToken = params.get('access_token');

const expiresIn = params.get('expires_in');

if (!isNaN(expiresIn * 1)) {
auth.expirationTime = Date.now() + expiresIn * 1000;
} else { // default of 1 hour expiry
auth.expirationTime = Date.now() + 3600 * 1000;
}
} else {
const authToken = getQueryVariable('auth');
if (authToken) {
auth.accessToken = authToken;
// review if this works
auth.expirationTime = Date.now() + 3600 * 1000;
}
}

return auth;
}

function getQueryVariable(variable) {
var query = window.location.href.split('?');
var vars = query[1] ? query[1].split('&') : [];
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
}

function genesysCloudDomainForRegion(region, env) {
if (env && env === 'dev') {
return 'inindca.com';
} else if (env && env === 'test') {
return 'inintca.com';
}

switch (region) {
case 'euw1':
return 'mypurecloud.ie';
break;
case 'euc1':
return 'mypurecloud.de';
break;
case 'apne1':
return 'mypurecloud.jp';
break;
case 'apse2':
return 'mypurecloud.com.au';
break;
case 'aps1':
return 'aps1.pure.cloud';
break;
case 'euw2':
return 'euw2.pure.cloud';
break;
case 'cac1':
return 'cac1.pure.cloud';
break;
case 'usw2':
return 'usw2.pure.cloud';
break;
case 'apne2':
return 'apne2.pure.cloud';
break;
default:
return 'mypurecloud.com';
}
}

function redirectToGadget(customerId, accessToken, regionDefined) {
const domain = genesysCloudDomainForRegion(regionDefined, environment);
let gadgetUrl = `https://apps.${domain}/journey/gadgets/v0/integration/purecloud-launcher/?gadgetId=holisticCustomerJourney&customerId=${customerId}&customerIdType=cookie`;

if (accessToken) {
gadgetUrl += `&accessToken=${accessToken}`;
}

window.location.href = gadgetUrl;
}

exec();
</script>
</body>
</html>

Determine your region based on the following table.

URL Used to access Genesys	Region short name
https://apps.mypurecloud.com	use1
https://apps.usw2.pure.cloud	usw2
https://apps.cac1.pure.cloud	cac1
https://apps.mypurecloud.de	euc1
https://apps.mypurecloud.ie	euw1
https://apps.euw2.pure.cloud	euw2
https://apps.aps1.pure.cloud	aps1
https://apps.apne2.pure.cloud	apne1
https://apps.mypurecloud.com.au	apse2
https://apps.mypurecloud.jp	apne1

Set the API trigger iframe URL to https://<url-to-the-html-file>?clientId=<OAUTH_CLIENT_ID>]&region=<REGION_SHORT_NAME>&redirectUri=https://<url-to-the-html-file>.

Results on the Agent Platform
Agents can now inspect the customer's journey on the Agent Platform.
1. Make sure that Agents are logged into the Genesys Agent Workspace and into Genesys Cloud as well.
2. Select the icon of the API trigger set in Step 4 in the top ribbon.
3. The Web visit visualization of the customer is now visible and Agents can get details about each phase of the the customer's journey.

Optional: Customize Chat Buttons

Note: This article is part of a Quick Start Guide to help you implement your Digital DX environment from scratch.

Every business has its own unique voice and brand identity, and Digital DX gives you the control and flexibility to customize your implementation to your unique business needs.

Click Channels > Chat > Chat Buttons (Floating).
Click on the name of your chat button.
Go to the Settings > Display.
You can select among predefined images in our Button Template library or provide URL links to your own custom button images.
Scroll down to the Positioning section to select where your chat button is displayed on your web page and how it will animate when shown to the visitor.
Save your changes.

Previous article: Optional: Customize Chat Windows

Generate chat button HTML

The primary connection between Digital DX and your chat customers is a snippet of HTML code that you generate together with a chat button and insert to your site.

When choosing an HTML snippet for your site, you are asking yourself the following questions:

Which button or link are you showing to customers?
Are you collecting information about customers so you can analyze and react to visits even before they chat?
Are you tracking conversion events so you can relate specific chats to actual sales or other milestones?
Are you inviting customers to chat based on characteristics of their visit such as page visited, length of visit, and more.

Here's how to set up a Digital DX chat button HTML snippet to create a "gate" between customers and Digital DX. For this first test we'll create a Floating Chat button.

In the Web Admin Center, choose the type of HTML code to generate:

Option	Description
Floating Chat Button	Select Channels > Chat > Chat Buttons (Floating) when you want to implement a floating chat button and/or monitor customers before chat and/or invite users to chat based on characteristics of their visit.
Static Chat Button	Select Channels > Chat > Chat Buttons (Static) when you want to implement a fixed-position chat button or link on your site.
Conversion Tracking HTML	Select Customers > Conversion Codes when you want to track conversion events so you can relate specific chats to actual sales or other milestones.

What is the difference between static and floating chat buttons?

A static chat button is a standard HTML button that is always displayed on your website as a static element. Whether it's a button or just a clickable string of text depends on how you configure your chat button definition.

Floating buttons are animated by default and they slide into view when the customer moves the mouse over these buttons. When the button slides in, it covers part of your website, essentially creating an extra layer on top of your website content. You can define where the initial shrunk version of the button should appear on your website and how much it should shrunk before a customer moves the mouse over it.

Apply settings to your HTML and associated entities.
Tip: This article focuses on the "big picture" of how to implement an HTML snippet rather than the potentially long chain of settings that you can make to the various Digital DX entities that can be associated with an HTML snippet, such as Chat Button definitions, Chat Window definitions, Website definitions, Department definitions, Invitation Rulesets, Conversion Codes, and more.
Click Generate HTML and then Copy to Clipboard.
Result:
Paste the code to your site.
Important: Modifications to the generated HTML code may cause unexpected behavior and is not supported. For assistance or questions regarding the HTML snippet, contact Support.
When pasting the HTML code to your site, consider the following in light of your actual site architecture:
- To activate the code on all pages, paste the code into the footer include of your website before the closing <body> tag.
- To activate the code per page (on a single page or multiple pages individually), paste the code into any page before the closing <body> tag.
- If the chat button associated with your HTML uses a layered chat window, make sure your pages start with a <!DOCTYPE html> tag. Without this tag, some versions of Internet Explorer will use quirks mode and open the layered chat window in a pop-up.
Tip: If you are sending the code snippet to a web developer via email, do not paste the code directly into an email message. Save the HTML code in a text file (Notepad, for example) and attach it to an email.

You must re-copy and re-insert your HTML code after making any of the following changes:

When you associate a new chat button (static or floating) with your HTML (rather than modifying an existing chat button)
When you associate a new website with your HTML (rather than modifying an existing website)
When you toggle Pass custom information about customer on/off
When you change the Conversion Code associated with your HTML
When you change the invitation rule set associated with your HTML

Show a different chat button image when agents are available/unavailable

To ensure that customers are properly informed about agent availability, you can choose to show a specific chat button image when at least one agent is available and another (or none) when no agents are available.

This feature is part of the chat button setup process for both floating and static buttons.

Create or edit a fixed-position (static) or floating chat button, as follows:
1. In the Web Admin Center, go to Channels > Chat > Chat Buttons (Static) / Chat Buttons (Floating).
2. Select an existing chat button or click Create New.
On the Settings tab in the Display section under When Unavailable, choose the expected behavior when no agents are available:
- Show Unavailable Button: When no agents are available, the Unavailable chat button is displayed to customers as displayed on the Preview pane.
- Show No Button: When no agents are available, no button is displayed to customers.
- Show Available Button: When no agents are available, the Available chat button is displayed to customers as displayed on the Preview pane.
You can also select a custom image for your available and unavailable agents that customers can see. To do so, select the Custom image source and enter the available and unavailable chat image URLs into the corresponding fields.
Save your changes.
Result: The settings are applied to the chat button.