Commerce chat with Omnichannel for Customer Service

  • 20 minutes

The Commerce module library includes the Commerce chat feature. The Commerce chat feature extends the chat capabilities of Omnichannel for Customer Service to e-commerce customers, including live customer service representative support to help resolve customer concerns, offer customer service, and promote sales for Commerce customers.

Prerequisites for Omnichannel for Customer Service

As a prerequisite, you must configure chat in the Omnichannel for Customer Service Administration widget and obtain some of the parameters to configure the Commerce chat experience. For more information, see Configure a chat channel.

The script that you receive after setting up chat in the Omnichannel Administration widget will resemble the following example.

<script id="Microsoft_Omnichannel_LCWidget" src="https://oc-cdn-ocprod.azureedge.net/livechatwidget/scripts/LiveChatBootstrapper.js" data-app-id="xxxx-xxx-4be7-bcd5-1d118ecffe1f" data-org-id="5a0e73c0-xxxx-xxxxx-xxx- 76df135f375d" data-org-url="https://xxsxxxxssdb348f-crm.omnichannelengagementhub.com"></script>

You'll need this script to set up the chat module, so make sure that you copy and/or save it somewhere on your local device so that you can reference it later.

Commerce chat with Omnichannel for Customer Service mandatory fields

The following values are required from the script that you previously generated to set up the Commerce chat feature with Omnichannel for Customer Service.

  • Script source - The value of src in the chat widget script.

  • Data application ID - The value of data-app-id in the chat widget script.

  • Data organization ID - The value of data-org-id in the chat widget script.

  • Data application URL - The value of data-org-url in the chat widget script.

Set up the Commerce chat experience for your e-commerce site

One recommended method for integrating the Commerce chat feature into your e-commerce site is to add the Commerce Chat with Omnichannel module to the shared header fragment that you use on your site in Commerce site builder.

Follow these steps to add the Commerce chat with Omnichannel module to the shared header fragment on your site:

  1. Go to the site builder for your site and then go to Fragments.

  2. Select New, and when the New fragment dialog appears, select the Commerce Chat with Omnichannel for Customer Service module.

  3. Enter a name for the fragment and then select OK.

  4. In the Outline view, select the Msdyn365 cs chat connector slot.

  5. Go to the Chat properties pane on the right. To fill in these fields, you'll need the Omnichannel for Customer Service script that you previously generated:

    1. In the Script source field, enter the src value from the script.

    2. In the Data application ID field, enter the data-app-id value from the script.

    3. In the Data organization ID field, enter the data-org-id value from the script.

    4. In the Data organization URL field, enter the data-org-url value from the script.

  6. Select Save and then select Finish editing to check in the fragment.

  7. Select Publish.

  8. Go to Fragments and open the header fragment for your site.

  9. In the Default container slot, select the ellipsis (...) and then select Add fragment.

  10. When the Select modules dialog appears, select the chat fragment that you created previously, and then select OK.

  11. Select Save and then select Finish editing to check in the fragment.

  12. Select Publish to publish the fragment.

Add Commerce orders headquarters as an application tab for Omnichannel for Customer Service

In Omnichannel for Customer Service, you can add an application tab for Commerce headquarters. Then, live agents can use this user interface to access the Dynamics 365 Commerce Customer Service module, which provides contextual information about the customer and information about their sales orders. Customer service representatives can also place new orders, start returns, and verify order status information.

Create a new application tab that loads Commerce headquarters in an iFrame module

To create a new application tab that loads Commerce headquarters in an iFrame module, follow these steps:

  1. Go to the Microsoft Power Apps maker portal.

  2. In the left navigation pane, select Apps.

  3. Select Customer Service admin center and then go to Agent experience.

  4. For Application tab templates, select Manage.

  5. Create a new application tab of the Third-party website type. For instructions on creating an application tab and details about its parameters, see Manage application tab templates.

  6. Under Parameters, in the Value field of the URL parameter, enter the following URL, where you'll need to replace <YourOrganizationHeadquartersURL> and <LegalEntityname> with the appropriate values. Omnichannel for Customer Service reads {AccountNumber} from the chat context so that you don't need to edit {AccountNumber}.

    https://<YourOrganizationHeadquartersURL>/?mi=MCRCustomerService&cmp=<LegalEntityName>&embedded=true&customerId={AccountNumber}

  7. Leave the Value field of the Data parameter blank.

Enable a new application tab for customer agents in Omnichannel for Customer Service

To enable a new application tab for customer agents, you'll need to be in the Power Apps maker portal.

  1. In the left navigation pane, select Apps.

  2. Select Customer Service admin center and then go to Customer support > Workstreams.

  3. Open the workstream that you've created for your agents, and then under Advanced settings, select Sessions default.

  4. Under Application Tabs, select Add Existing Application Tab and then add the new application tab that you created previously. This step ensures that when a customer service representative receives an incoming chat call from your e-commerce website, an application tab that loads Commerce headquarters in an iFrame module will open.

Add context variables in Omnichannel for Customer Service

To add context variables in Omnichannel for Customer Service, you'll need to be in the Power Apps maker portal.

  1. In the left navigation pane, select Apps.

  2. Select Customer Service admin center and then go to Customer support > Workstreams.

  3. Open the workstream that you've created for your agents, and then under Advanced settings, go to the Context variable section.

  4. Select Edit and then add AccountNumber as a context variable of the text type. This variable will make it easier for Commerce headquarters to load customer information with matching account numbers.

Additionally, if you want to read the email addresses and names of signed-in users from an e-commerce channel, you can add Email and Name as text type context variables.

Update Content Security Policy in site builder

To update Content Security Policy (CSP) for your site, go to the site builder:

  1. Select the site that you're working on and then select Site Settings > Extensions.

  2. On the Content security policy tab, add https://oc-cdn-ocprod.azureedge.net as a new entry to the following directives:

    • Child-src

    • Connect-src

    • Font-src

    • Frame-ancestors

    • Frame-src

    • Img-src

    • Media-src

    • Object-src

    • Script-src

    • Style-src

  3. Select Save and Publish.

For more information, see Manage Content Security Policy (CSP).