# Add Chat Widget to Power Pages - Proactive Chat

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.

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2F3URGrcIYg0thFtDvT87m%2F7770125.jpg?alt=media&#x26;token=64671d14-94e7-4e38-a861-26ae107a0fce" alt=""><figcaption></figcaption></figure>

## Add "Chat Widget" to Power Pages

Firstly, You must create the [Power Pages](https://learn.microsoft.com/en-us/power-pages/getting-started/create-manage) site.&#x20;

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

| Open Power Page Management Apps                                                                                                                                                                                                                                                                  | Path                                                                                          |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
| <img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2F6IoUzFcpX5VTmKXbZKsf%2FCleanShot%202024-04-12%20at%2010.05.24%402x.png?alt=media&#x26;token=aba10fed-2753-4e9f-aa07-19d493522e38" alt="" data-size="original"> | In Power Apps Studio > select Apps > then click open **Power Pages Management** application   |
| <img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FxHwBHOEJiYWVMUa26ON9%2FCleanShot%202024-04-12%20at%2010.08.15%402x.png?alt=media&#x26;token=301e2847-98e6-454e-86ac-fecc286d5f8b" alt="" data-size="original"> | 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.

After that, you just copy the [Chat Widget's code snippet](https://dyns.ntd.asia/power-dynamics/d365-ce/customer-experience/omnichannel/internal-live-chat-in-mda#create-a-live-chat-channel) and then paste it to the **Value (HTML)** as below.

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FIZSIDly9bsVz7WrHR8iu%2Fimage.png?alt=media&#x26;token=7e633224-0a48-4c8e-b45a-bd58d882ce5d" alt=""><figcaption><p>Add HTML of Chat Widget snippet code</p></figcaption></figure>

Now testing...

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FvOFnty9qjO5mprTX9NBT%2FCleanShot%202024-04-12%20at%2010.20.38%402x.png?alt=media&#x26;token=598a0c16-1db1-47e6-9f1e-91049367cc54" alt=""><figcaption><p>Chat Widget - Testing</p></figcaption></figure>

## 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.&#x20;

<mark style="color:blue;">**For instance,**</mark> <mark style="color:blue;"></mark><mark style="color:blue;">identifying when a</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**customer has lingered on a specific page**</mark> <mark style="color:blue;"></mark><mark style="color:blue;">for an extended period could be a prime opportunity to prompt engagement with agents via web chat</mark><mark style="color:blue;">**.**</mark>

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.

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2Fb6t23C63tyilpdQQZRlB%2FCleanShot%202024-04-12%20at%2012.59.35%402x.png?alt=media&#x26;token=5de88dd4-e98a-4447-9b30-e31d763e09ec" alt=""><figcaption><p>Enabling Proactive Chat for Chat channel</p></figcaption></figure>

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

First, we must access this Microsoft [Link](https://learn.microsoft.com/en-gb/dynamics365/customer-service/develop/start-proactive-chat) to get the sample code for the **Proactive Chat** configuration.

For my instance, I will use the sample code of [**Scenario 1: Customer wait time**](https://learn.microsoft.com/en-gb/dynamics365/customer-service/develop/start-proactive-chat#scenario-1-customer-wait-time)**.**

{% code lineNumbers="true" %}

```html
// 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>
```

{% endcode %}

**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.&#x20;

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2F52A7Lp8e0N8N3BeQLkBK%2FCleanShot%202024-04-12%20at%2013.12.20%402x.png?alt=media&#x26;token=5869b383-3d6d-40f3-a81d-e1ffc3bdd07e" alt=""><figcaption><p>Edit cod on Visual Studio Code</p></figcaption></figure>

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

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FBPhb9240N6eIhhxOPlGM%2FCleanShot%202024-04-12%20at%2013.17.53%402x.png?alt=media&#x26;token=b8973b06-04fd-45f5-aaf9-1a29f018031f" alt=""><figcaption><p>Input the proactive chat sample code</p></figcaption></figure>

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

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FlfK2kxf90Q7TeqdfgJ1U%2FCleanShot%202024-04-12%20at%2013.22.28%402x.png?alt=media&#x26;token=124d1c1f-29f4-4fd8-a4af-54c41885aba8" alt=""><figcaption><p>Sync latest code for Power Page</p></figcaption></figure>

### 3. Testing Proactive chat...

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

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FKlgMXfciFUPoW0KGCH3F%2FProactive_chat_powerPage.gif?alt=media&#x26;token=d92d387e-236d-4ee3-8b36-eecf5b5ad6fc" alt=""><figcaption><p>Proactive Chat - Testing</p></figcaption></figure>

Thank you for watching and Hoping well! :tada:\
\&#xNAN;**\[NTD]yns.asia**