Simulator for Channel Integration Framework v. 2.0 and Dynamics 365 Customer Service

  • [アーティクル]

Applies to: Dynamics 365 Customer Service

This article outlines the required steps to configure and simulate a digital contact center with the Customer Service workspace and Channel Integration Framework v2.0 with voice channel. The sample simulator is a resource to help optimize the Dynamics 365 implementation and Channel Integration Framework version 2.0 experiences. Use the Channel Integration Framework simulator solution to test and learn the work processes before you go live in production.

Note

The simulator is a collection of samples that we built using the Channel Integration Framework. There is no direct integration with a third-party phone provider in this sample solution.

Prerequisites

Configuration steps

  1. Download the package at Channel Integration Framework Simulator

    Extract the files, and then open the Solution Channel Integration Framework simulator solution in Power Apps. Learn more about how to import solutions at Import solutions.

  2. Choose a default account and contact

    The simulator has the following defaults:

    Type Name
    Account A Datum Corporation
    Contact Abraham McCormick

    If you want or have to choose another default account for your environment, select it, choose Email a link, and then choose the relevant name and ID. Use the same steps to choose a default contact. Then, change the HTML page to reflect the chosen default account and contact. Learn more at View, compose and respond to email in the Customer Service docs.

  3. Open the imported solution, and then, from the list of objects, choose the object of type HTML Web Resource

    Learn more at Import solutions

  4. Edit the code changing the onChangeCustomerEntityName() function with the relevant values for Customer Name and Customer Record Id (GUID).

Next, we configure templates for the different work spaces.

Add notification templates

  1. In the Customer Service admin center, in the Agent experience, open the list of workspaces, and then choose the Manage action for the Notification templates workspace.

    Learn more at Manage notification settings and templates.

  2. Verify that a notification template with the name DCCP Voice Notification Template already exists. Otherwise, create a new one with the following values:

    Field Value
    Name DCCP Voice Notification
    Unique Name extn_voice_notification
    Title {customerName}
    Icon /webresources/msdyn_chat_icon

  3. Also add a notification field for the sample phone number with the value extn_phonenumber

Add application tab templates

  1. Go back to the list of workspaces, and then choose the Manage action for the Application tabs templates workspace.

    Learn more at Manage application tab templates.

  2. If they don't already exist, add three templates.

    a. Add a template for search based on the following table.

    Field Value
    Name DCCP Global Search
    Unique Name extn_global_search
    Page Type Search

    b. Add a template for cases based on the following table.

    Field Value
    Name DCCP Case Form
    Unique Name extn_case_tab
    Page Type Entity Record
    Parameter field data {"customerid":"{customerRecordId}", "customeridtype":"{customerEntityName}", "customeridname":"{customerName}", "caseorigincode":"{extn_media_type}", "description":"Phone: {extn_phonenumber} / Email: {extn_email_address} / InteractionId: {extn_interactionid}", "title":"{extn_subject}"}
    Parameter field entityName incident

    c. Add a template for customers based on the following table.

    Field Value
    Name DCCP Customer Form
    Unique Name extn_customer_tab
    Page Type Entity Record
    Parameter field entityID {customerRecordId}
    Parameter field entityName {customerEntityName}

Add session templates

  1. Go back to the list of workspaces, and then choose the Manage action for the Session templates workspace.

    Learn more at Manage session tab templates.

  2. If they don't already exist, add two templates.

    a. Add a template for default sessions based on the following table.

    Field Value
    Name DCCP Default Session
    Unique Name extn_default_session
    Page Type Generic
    Title Channel Integration Framework 2.0 Simulator Home
    Communication panel mode Docked
    Anchor Tab Global Search

    b. Add a template for identified sessions based on the following table.

    Field Value
    Name DDCCP Voice Identified Session
    Unique Name extn_voice_identified_session
    Page Type Generic
    Title Voice-{customerName}
    Communication panel mode Docked
    Anchor Tab DCCP Case Form

    Also add an extra tab based on the customerName data entity.

Add voice channel providers

  1. Go back to the list of workspaces, and then choose the Manage action for the Third party voice channel provider workspace.

    Learn more at Manage session tab templates.

  2. Add a template for channel providers based on the following table.

    Field Value
    Name CIF2_Simulator
    Unique Name extn_cif2simulator
    Label CIF2 Simulator
    Channel URL https://EnvironmentURL/WebResources/extn_/sample/vnb_cif_support_html
    Enable Out Bound Yes
    Channel Order 1
    API Version 2
    Enable Analytics Yes

Add agent experience profiles

  1. Go back to the list of workspaces, and then choose the Manage action for the Agent experience profiles workspace.

    Learn more at Agent experience profiles.

  2. Add a template for agent experiences based on the following table.

    Field Value
    Name CIF2_Simulator
    Unique Name extn_cif2simulator
    Label CIF2 Simulator

  3. In the Channel providers section, choose the Edit action, and then add the CIF2_Simulator channel provider that you set up in the Add voice channel providers section.

    Next, you assign users

  4. Choose the Edit action to assign users

  5. Add the users that work with the simulator to the list. Learn more at Add users to agent experience profiles

Run the simulator for inbound interactions

Run the simulator in the Customer Service workspace. You can configure the following parameters to simulate an inbound interaction:

  • Media Type

    The channel of the interaction. It uses the {extn_media_type} custom slug

  • Notify Template

    Read-only. It changes according to the Media Type.

  • Session Template

    Read-only. It changes according to the Media Type.

  • Telephone

    The calling number. It uses the {extn_phonenumber} custom slug

  • E-mail Address

    The e-mail address for email and chat channels. It uses the {extn_email_address} custom slug

  • Subject

    A simple text that uses the {extn_subject} custom slug.

  • Interaction/Call Id (extn_interactionid)

    The unique identifier of the interaction/call ID in the third party channel provider. In the simulator, it's a random GUID that uses the {extn_interactionid} custom slug.

  • Customer Data

    You can change the default values for these fields, but choose an existing account or contact.

  • Customer Name

    The name of the account (name) or contact (fullname). It uses the {customerName} slug.

  • Customer Entity Name

    The account or contact. It uses the {customerEntityName} slug.

  • Customer Record Id (GUID)

    The account ID or contact ID of the customer. It uses the {customerRecordId} slug

Notification

When you have specified the media type and filled in the parameters form, choose the Notify action. A pop-up dialog gives you two choices:

  1. Accept

    Choosing to accept the notification creates a session and fills in a new case with data from the parameters and custom slugs.

  2. Reject

    Choosing to reject the notification creates a task and notifies you about it. You get the same message if you let the notification time out.

Multi-session experience

You can create multiple sessions by customer and channel. For example, create an outbound (click-to-call / click-to-act) interaction by choosing the customer under a session, and then choosing the Phone icon. It triggers the Channel Integration Framework 2.0 onclicktoact event.

Miscellaneous Channel Integration Framework API Calls

The simulator has the following buttons to call the Channel Integration Framework 2.0 API:

  • Get all sessions calls Microsoft.CIFramework.getAllSessions

  • Get current session calls Microsoft.CIFramework.getFocusedSession

  • Change current session's title calls Microsoft.CIFramework.setSessionTitle

  • Notify new activity in other sessions calls Microsoft.CIFramework.notifyNewActivity

  • Notify urgency in sessions calls Microsoft.CIFramework.notifyKpiBreach

  • Request focus on another session calls Microsoft.CIFramework.requestFocusSession

  • Set presence status as Away calls Microsoft.CIFramework.setPresence

  • Create case calls Microsoft.CIFramework.createRecord

  • Close current Tab calls Microsoft.CIFramework.closeTab

Extend the simulator

The code for the simulator app is under the extn_/sample/vnb_cif_support_html web resource. It's an HTML file containing the page definition and the JavaScript.

For example, if you want to add new slugs or attributes, take the following steps:

  • Include them in the form, such as after the Interaction/Call Id field
  • Include them in the notification by adding them to the onChangeNotifyContext function
  • Include them in the Session Context by adding them to the onChangeSessionContext function

If you want to perform some actions in Dynamics 365 after creating a session, add them to the _createSession function.

Add the {comment} slug to the form

In this example, we add the {comment} field below the Subject field inside the HTML <body> element.

    <div class="parameter">
        <div>Comment (extn_comment)</div>
        <input type="text" id="extn_comment" value="This is a comment" onChange="extnSample.CommonFunctions.onChangeNotifyContext();"/>
    </div>

Add the {comment} slug to the notification input object

The changes should be made to the onChangeNotifyContext function.


      onChangeNotifyContextCustomPage: function ();
          var extnbr_notify_template = document.getElementById("extnbr_notifytemplate").value;
          var extnbr_session_template = document.getElementById("extnbr_session_template_custompage").value;
          var extnbr_customerName = document.getElementById("customerName").value;
          var extnbr_mediatype = document.getElementById("extnbr_mediatype").value;
          var extnbr_telephone = document.getElementById("extnbr_telephone").value;
          var extnbr_email_address = document.getElementById("extnbr_email_address").value;
          var extnbr_subject = document.getElementById("extnbr_subject").value;
          var extnbr_comment = document.getElementById("extnbr_comment").value;

Add the {comment} slug to the session creation input object

The changes should be made to onChangeSessionContext function:

Add the {comment} slug to the notification template

Add the Comment notification field for {comment} slug as follows:

  1. Open the voice notification in the Customer Service admin center
  2. In the Notification Fields section, add new notification field based on the following table.
Field Value
Name DCCP sample message
Title Comment
Value {extn_comment}

Use the {comment} slug in the Case form

  1. Create a new JavaScript Web Resource with the following function, and include it in the Case form Onload event:
function extn_CaseForm (executionObj) {

  var formContext = null;

  if (executionObj !== null && executionObj.getFormContext !== null)

    formContext = executionObj.getFormContext();

  else

    formContext = executionObj;

    Microsoft.Apm.getFocusedSession().getContext().then(

    function (session_context) {

      if (session_context.parameters["comment"] != null && session_context.parameters["comment"] != undefined && session_context.parameters["comment"] != "") {

       alert("Comment for the user: " + session_context.parameters["comment"]);
      }

   }

   );

}

Learn more