Book a Demo

Configuring Record Viewer in Microsoft Dynamics

The record viewer allows you to view chat transcripts and listen to call recordings archived in the Puzzel application. It is a passive tool which simply permits you to access the archive after having authenticated into the Puzzel Application. By making the records available within Dynamics, the agents can go through the previous interactions with the customer and provide a greater customer service.

Overview

In this document, you will be able to understand how to configure the record viewer within Microsoft Dynamics. This is done in 2 steps as listed below:

Add script to Dynamics Web Resources
Customize the Phone Call form
Customize the Task form

Configuring Record Viewer in Microsoft Dynamics

To configure the Puzzel Record Viewer, you need to:

Click on the Settings icon in the top toolbar on the right corner of your screen and select Advanced Settings
Expand the Settings option and select Customizations in the Customization list
Click on Customize the System option to open the Power Apps window

Add script to Dynamics Web Resources

Follow the steps listed below to add script to a new Dynamics Web Resource.

From the tree structure on the left, select Web Resources under Components and click on New to create a new resource
Enter recordViewerScript for the Name parameter and select Script in the drop-down menu for Type and click on Text Editor

Paste the below code snippet in the editor and click OK

function recordViewer(executionContext) {

    if (!executionContext) {
        console.log("Context is not provided!");
        return;
    }
    var formContext = executionContext.getFormContext();

    var description = formContext.getAttribute("description").getValue();

    if(!description) {
        return;
    }

    var IFrame = formContext.ui.controls.get("IFRAME_RecordViewer");

    if (!IFrame) {
        console.log("There is no IFrame with name 'IFRAME_RecordViewer' in the form!");
        return;
    }

    var rows = description.split("\n");

    if(!rows || !rows[0]) {
        return;
    }

    var sessionId = rows[0].split(": ")[1];

    if (sessionId) {
        var Url = IFrame.getSrc().split("?")[0];
        IFrame.setSrc(Url + "?SessionId=" + sessionId);
    }
}

Save, Publish, and close the window

Customize the Phone Call form

Do the following to customize the Phone Call form:

From the tree structure on the left, select Entities -> Phone Call ->Forms and click on the Phone Call for Interactive experience option
In the top menu, select Insert tab and pick Iframe option as shown in the picture below
In the Add an Iframe window, enter the values to the parameters as described in the table and click OK

Parameter
Value

Name IFRAME_RecordViewer

URL https://prod-paa-widgets.puzzel.com/crv/

Label Record Viewer
In the top menu, select the Home tab and click on Form properties option.
In the Form Properties window, navigate to the Events tab and click the add button
In the Lookup Record window, search for new_recordViewerScript and click Add
In the Event Handlers section, select Form in the drop-down options for the Control parameter and OnLoad for the Event parameter.
Click on the Add button to open the Handler Properties window. Enter RecordViewer for the Function parameter and tick Enabled. Under Parameters section, check Pass execution context as first parameter and click OK
Save, Publish, and close the window.