How to Post Custom Web Chat Data

Written By Fikri Ghazi

Introduction

The custom metadata is a set of additional metadata that the guest web client can take and post to the Chime backend. Once it is posted using the proper format, it will be part of the SeekerData property in a session details. This allows the agent web client to take the custom metadata from the session details and render it on the context window.

How it works

Generally speaking, there are only three important parts when talking about this custom metadata feature:

  1. Custom HTML file, where you need to set your custom metadata.

  2. Chime Windows Server, where you need to put your custom HTML file.

  3. And, a guest web client URL, from the queue that will store the custom metadata.

The flow of this feature starts from the custom html file which the Chime Server supposed to serve. Inside the custom html file there are two important configurations. First, is the rendering of the guest web client using an HTML iframe. And second, is setting up the the custom metadata. Once you have these two configurations, guests can visit the custom html page from their browsers. Then, the web client inside the iframe will check if there exists custom metadata inside its parent html page, if so, it will post the custom metadata together with existing seeker data to the backend server.

How to implement custom seeker data

Step 1
Create an HTML file with a unique file name for example, custom-seeker-data.html.

Step 2
Copy and paste the following code into the HTML file that you just created.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Chime Web Client</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }
        iframe {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            border: 0;
        }
    </style>
</head>
<body>
    <iframe id="webclient" src="https://ch-teams-net1.imchime.com/Chime/webclient?id=14"></iframe>
    <script>
        window.chimeCustomMetadata = {
           // Enter custom metadata here.
           // Use US_ (short for User Settings) as variable name prefix
           US_CUSTOM_DATA1: "Custom data value 1",
           US_CUSTOM_DATA2: "Custom data value 2"
        }
    </script>
</body>
</html>

Step 3
Copy and paste your Chime web client URL into the iframe's src attribute located in the HTML file. To get this URL, go to Chime Queue Settings > Advanced then copy the Internal web client address URL.

Step 4
Modify the custom metadata so that it meets your requirements. From the HTML code above, the custom metadata is stored inside window.chimeCustomMetadata object.

Step 5
Copy and paste the HTML file into your Chime server. To do this, remote desktop into your Chime server and go to C:\Program Files\Instant Technologies\Chime For Teams\Content. Then paste your HTML file inside the Content folder.

Step 6
Test the custom web client on a web browser. To do this, open a web browser, and go to htts://<your-chime-server>/Chime/Content/<your-html-file>.html. For example: https://instant-teams.imchime.com/Chime/Content/custom-seeker-data.html 

The custom metadata will be rendered on the Details tab, under User Settings, of the agent web client context window.

custom-data.png

Advanved

The steps above will get you a new custom web client served from your Chime server. However you may notice that the custom metadata were hard-coded inside the custom html file. Supposed that you want to pass custom data into the custom web client, it is recommended that you do this with URL query string. Please see code snippet below for example.

    <!-- landing-page.html -->

    <!-- Chime Webclient -->
    <!-- Notice how the web client url uses query string to pass custom data into the custom web client -->
    <div>
      <button
        class="m-4 btn btn-primary shadow"
        style="position: fixed; bottom: 0; right: 0"
        onclick="
          var url='https://instant-teams.imchime.com/Chime/Content/custom-seeker-data.html?US_VAR1=VALUE_1&US_VAR2=VALUE_2';
          var windowName = 'chimeChat';
          var windowSettings = 'height=520, width=500, menubar=no, status=no, titlebar=no, toolbar=no, top=130, left=200, resizable=yes'
          window.open(url, windowName, windowSettings);
        "
      >
        Chat
      </button>
    </div>
    <!-- End of Chime Webclient customization -->
  </body>
</html>
    <!-- custom-seeker-data.html -->

    <body>
    <iframe id="webclient" src="https://instant-teams.imchime.com/Chime/WebClient?id=1"></iframe>
    <script>
        // Store the custom data from the query string in landing-page.html
        const params = new URLSearchParams(window.location.search);
        const US_VAR1 = params.get("US_VAR1");
        const US_VAR2 = params.get("US_VAR2");
        window.chimeCustomMetadata = {
            US_CUSTOM_DATA1: "Custom data value 1",
            US_CUSTOM_DATA2: "Custom data value 2",
            US_VAR1: US_VAR1, // Variable from query string
            US_VAR2: US_VAR2, // Variable from query string
        }
    </script>
</body>
</html>
Fikri Ghazi
Next

Chime for Slack and Teams Version 3.0.17