Power Dynamics
  • Power Dynamics
  • 🍕My name
  • D365 CE
    • Copilot
      • 🥐Add Copilot into Rich Text Control
    • Sales
      • Copilot in D365 Sales
      • Export record to PDF
    • Customer Experience
      • Contact Center (Omnichannel)
        • 🐚Internal Live Chat in MDA
        • 📢Add Chat Widget to Power Pages - Proactive Chat
      • Attachment Control
      • Case Routing: Basic Routing rule set
      • Custom SLA for any Entity
      • Customer Insight
        • Journey - Custom Trigger - Call Power Automate
    • Field Service
  • Power Platform
    • Analytics
    • Dataverse
      • Use case for the feature of Record ownership across Business Unit
      • 💡Workaround: Change the OOB "Exchange Rate" of a record
      • Using a Virtual Entity to store historical log (sample)
      • Disable Empty Address record
      • Using Adaptive card
      • Block Unmanaged Customizations
      • 🪃Recycle Bin on Dataverse (Preview)
    • Model Driven App
      • 💡Run SSRS report on MDA mobile
      • 💡Tip: Create a Security Role with "App Opener" minimum privileges
      • Tag @person to notify in MDA
      • Auto search on the Lookup field
      • Activities with multiple related records
      • Embedded Power BI - Dashboard
      • Embedded Power BI - Form
      • "Custom Help" - Is it help?
      • New modern Command Bar
      • Tip: Hide the button "Add Existing Record" on subgrid
      • Custom Page - Why not?
      • Hiding sensitive column data
    • Canvas App
    • Fabric & Power BI
      • New Text slicer
      • Dataverse link to Microsoft Fabric
      • 💡Leveraging Interactive Warehouse Floor Maps in Power BI
      • Calculation Group for Time Intelligence
    • Power Automate
      • ✅Sequential Approval
      • 📤Create an Appointment by Outlook Graph API
      • Dowload SSRS Report and Send email
      • Power Automate: Add a table in Email
      • 💡Tips: Get "DisplayName" of the Lookup field on Power Automate
      • E-sign: Power Automate & DocuSign
  • D365 Finance & Operation
    • General
      • 🇻🇳D365 FnO - Virtual entities: Use case
    • Finance
      • Consolidating Customer & Vendor Balances
    • Supply Chain
      • Landed Cost Series
        • Landed Cost- Essential Configuration
        • Landed Cost Scenarios 1
Powered by GitBook
On this page
  • Add "Chat Widget" to Power Pages
  • Proactive Chat
  • 1. Enable the Proactive Chat feature for "Chat" channel
  • 2. Inject the HTML code for Proactive Chat configuration on your page
  • 3. Testing Proactive chat...

Was this helpful?

  1. D365 CE
  2. Customer Experience
  3. Contact Center (Omnichannel)

Add Chat Widget to Power Pages - Proactive Chat

#ChatChannel, #PowerPage, #ProactiveChat

PreviousInternal Live Chat in MDANextAttachment Control

Last updated 1 year ago

Was this helpful?

In exploring the Chat channel in OmniChannel functionality, as in this article, I will note how to add the Chat Widget to Power Pages and enable Proactive Chat for this page.

Add "Chat Widget" to Power Pages

After that, open the Power Page Management application to begin configuration.

Open Power Page Management Apps
Path

In Power Apps Studio > select Apps > then click open Power Pages Management application

In the Power Pages site editor > select <...> icon then click Power Pages Management.

In the Power Pages Management application >> go to the Content subarea >> select the Code Snippets under for configuration.

Now testing...

Proactive Chat

The D365 Omnichannel for Customer Service allows showing the Live Chat widgets to customers. A chat channel allows your customers to engage with customer service agents using the chat widget on a website. However, You have thought that instead of waiting for them to initiate, we can invite them to a chat conversation proactively.

For instance, identifying when a customer has lingered on a specific page for an extended period could be a prime opportunity to prompt engagement with agents via web chat.

Okay... now I will drop my configuration as below.

1. Enable the Proactive Chat feature for "Chat" channel

Open Customer Service Admin > select Channel > select Chat and click manage. Then open the live chat channel, and enable Proactive chat at the Chat widget tab as below.

2. Inject the HTML code for Proactive Chat configuration on your page

// Scenario 1: Customer wait time
<!-- Code to show proactive chat invite after visitor has spend given time on the webpage -->
<script id="Proactivechattrigger">
	// Wait for Chat widget to load completely
    window.addEventListener("lcw:ready", function handleLivechatReadyEvent(){
		var timeToWaitBeforeOfferingProactiveChatInMilliseconds = 20000;
		     //time to wait before Offering proactive chat to webpage visitor
		// Setting context variables
        Microsoft.Omnichannel.LiveChatWidget.SDK.setContextProvider(function contextProvider(){
            return {
                'Proactive Chat':{'value':'True','isDisplayable':true},
                'Time On Page':{'value': timeToWaitBeforeOfferingProactiveChatInMilliseconds ,'isDisplayable':true},
                'Page URL':{'value': window.location.href,'isDisplayable':true},
            };
        });
		
		//Display proactive chat invite after 'timeToWaitBeforeOfferingProactiveChatInMilliseconds' milliseconds
        setTimeout(function(){
            Microsoft.Omnichannel.LiveChatWidget.SDK.startProactiveChat({message: "Hi! Just checking in to see if I can help answer any questions you may have."}, false)
        },timeToWaitBeforeOfferingProactiveChatInMilliseconds);
    });
</script>

Follow the steps:

Now, in the Power Pages Studio, on your Page on which you had configured the "Live Chat Widget" >> click the <Edit code>. The Power Pages code will be loaded in the Visual Studio Code on the web in the new tab.

My sample: I configured the Live Chat Widget on the Home page. So, I will input the proactive chat code for this page.

... then input the sample code on the page's HTML file and Save. (using browser shortcut to save file).

After input, back to the Power Page Studio then click the <Sync> button to synchronize the code from Visual Studio code.

3. Testing Proactive chat...

I will open my Power Page and test now...

Firstly, You must create the site.

After that, you just copy the and then paste it to the Value (HTML) as below.

First, we must access this Microsoft to get the sample code for the Proactive Chat configuration.

For my instance, I will use the sample code of .

Thank you for watching and Hoping well! [NTD]yns.asia

📢
🎉
Power Pages
Chat Widget's code snippet
Link
Scenario 1: Customer wait time
Add HTML of Chat Widget snippet code
Chat Widget - Testing
Enabling Proactive Chat for Chat channel
Edit cod on Visual Studio Code
Input the proactive chat sample code
Sync latest code for Power Page
Proactive Chat - Testing