Embed a Customer Insights widget in a Dynamics 365 web resource

[This topic is pre-release documentation and is subject to change.]

Follow these steps to add a Dynamics 365 for Customer Insights widget to your Dynamics 365 web resource.

Prerequisites

This section takes you through the steps for embedding Customer Insights widgets in the Customer Insights application that targets a specific role or audience.

  • The Dynamics 365 users who need to view the Customer Insights widgets in Dynamics 365 must be granted read permissions to the appropriate profiles, interactions, and interactions that the widgets show, in addition to the widgets and views that are being embedded. More information: Step-by-step role-based security.

  • The Dynamics 365 organization admin user needs admin privileges for the Customer Insights hub as well. To do this, go to the Azure portal > your Customer Insights hub > Settings > Security > Add.

  • Do not select Restrict cross site scripting in a Dynamics 365 entity or web resource customization if it is going to be a container for the Customer Insights view.

Steps

  1. Define views by using available profile types in Customer Insights, which can represent Account, Lead, Opportunity, or Contact entities in Dynamics 365.

  2. Create a simple HTML file to add as web resource or other custom entity in Dynamics 365.

  3. Customize entities in Dynamics 365 to use the web resource created in step 2.

  4. Check the embedded view in Dynamics 365.

  5. Troubleshoot.

Details

  1. Define Customer Insights views and extract the URLs of the embedded views. More information: Embedding a Customer Insights view.

  2. Create a Dynamics 365 web resource.

    This will be a typical Dynamics 365 web resource. In this example, we are creating an HTML file that contains:

    • Iframe to show the Customer Insights view.

    • Javascript function - called in HTML body onload to build iframe 'src' attribute value at runtime.

    After it is created, the same web resource can be added and published in Dynamics 365 by using Settings > Customizations > Customize the system > Web resources > New.

  3. Customize Dynamics 365 entities.

    In this step, we will insert the web resource created above into views for Dynamics 365 entities such as Account, Lead, Opportunity, and Contact.

    1. Choose any entity that you want to show Customer Insights views and widgets.

    2. Choose one of the active forms where you want to see the Customer Insights view or widget.

    3. Search for the web resource you published above, and insert it into the form in an existing section or a new section.

    4. When you insert the web resource, make sure the field you select as a dependency corresponds to the filterValue used in the web resource HTML. For example, if the Customer Insights URL query parameter has the format filterkey=Email&filtervalue=some@abc.com, add the Email field from the Dynamics 365 entity in the dependency for the web resource.

      Sample web resource:

      <!doctype html>
      <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>
            Customer Insights View
        </title>
        <script type="text/javascript">
            function onLoad() {
                var dciFrame = document.getElementById("frameDCIView");
                if (dciFrame) {
                    dciFrame.src = formIframeUrl();
                }
            }
      
            function formIframeUrl() {      
                //Typical DCI url format goes like 'https://<DCI hub name>.apps.azurecustomerinsights.com?viewid=<DCI view id>'
                var dciViewUrl = "https://<DCI-hub-name>.apps.azurecustomerinsights.com?viewid=<DCI-view-id>";
                //Fetching entity name from CRM page in the context
                var crmEntityName = window.parent.Xrm.Page.data.entity.getEntityName()+ "id";
                //Fetching entity id from CRM page in the context
                var crmEntityId = window.parent.Xrm.Page.data.entity.getId();
                if(!!crmEntityId){
                    if(crmEntityId.indexOf("{") >= 0){
                        // Clipping off {} from guid Eg. {D3AE1B3A-8BD2-E411-80EF-C4346BAC7BE8} to D3AE1B3A-8BD2-E411-80EF-C4346BAC7BE8                 
                        crmEntityId = crmEntityId.substring(1,crmEntityId.length - 1);
                    }
                    var filter = "&filterkey=" + crmEntityName + "&filtervalue=" + crmEntityId.toLowerCase();
                    // Final url format would be 'https://<DCI hub name>.apps.azurecustomerinsights.com?viewid=<DCI view id>&filterkey=<crmEntityName>&filtervalue=<crmEntityId>'
                    return dciViewUrl + filter; 
                }else{
                    console.error("Unable to render Customer Insights View");
                }  
                return "";
            }
        </script>
      </head>
      <body onload="onLoad()">
        <iframe id="frameDCIView" src=''></iframe>
      </body>
      </html>
      
    5. Save and publish the entity.

  4. Check the embedded view.

    1. Open one of the customized entities from Dynamics 365.

    2. The Customer Insights view should be visible in the web resource added for the entity in context.

  5. Troubleshoot.

    If only the Customer Insights nav bar [header] is showing:

    • This may be due to an Azure Active Directory token conflict during single sign-on. Make sure the Dynamics 365 signed-in user is part of Azure Active Directory for the Customer Insights hub.