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

                   
  1. 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.
     
  2. 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.

       
  3. 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.

       
  4. 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.
       
  5. 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. 
         
  6. Creating the iFrame
    1. 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>

      <!-- This page is loaded in an iframe by the Bold360 Agent Workspace when an agent accepts an interaction. -->
      <!-- The page extracts the customerId passed by the parent application and -->
      <!-- uses it to redirect to the customer journey visualisation for that customerId. -->
      <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>

    2. 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

       

    3. 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>.
       
  7. 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.