Loading...

Display Omnichannel chat widget in the footer of your portal

Display Omnichannel chat widget in the footer of your portal

The combination of PowerPortals, Dynamics 365 Omnichannel and Power Virtual Agents increases the level of customer engagement for customers, in this post I'm going to guide you how to add your Omnichannel chat widget that you configured to your portal.

First, below are the pre-requisites to follow the blog,

  1. You have at least one Portal
  2. Omnichannel is installed
  3. Power Virtual Agent bot is configured to hand of chat conversations to Omnichannel

After having the above pre-requisites done, follow the below steps,

  1. From the "Omnichannel admin center" model-driven application
  2. Go to Workstreams and create and configure a new workstream based on your channel image.png
  3. Enter your stream record, and click on "Copy code snippet" image.png
  4. Switch to "Portal Management" model-driven app
  5. Create a new content snippet and past the copied snippet from Omnichannel work steam image.png
  6. Go to "Web Templates" and enter the "Footer" record image.png
  7. Search for the footer tag and add the widget using the below code
{% include 'snippet' snippet_name:'Your Chat Widget Name' %}

The footer tag will look like this

<footer role="contentinfo">
  <div class="footer-top hidden-print">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-12 col-xs-12 text-left">
          {% editable snippets 'About Footer' type: 'html' %}
          {% include 'snippet' snippet_name:'Your Chat Widget Name' %}
        </div>
      </div>
    </div>
  </div>
  1. Clear your portal cache by navigating to "<< Your portal URL >>/_services/about"

You need to be logged in to your portal with a contact that has administrator portal role

click on "Clear Cache" button

  1. Refresh your portal and you will see the chat widget displayed! image.png image.png

That's it!

You want to add it to more web templates? follow the steps from step number 5 on the web template you like.

Published on:

Learn more
Vite apps
Vite apps

Vite apps

Share post:

Related posts

Power Pages Fundamentals #20: Step-by-Step Guide to Create Dataverse Records in Power Pages: Quick Read Series

In Power Pages to create records and store them in dataverse , we can use power of WebAPI and use it inside liquid in web template. I will exp...

6 days ago

How to Create Reusable Custom Component using Web Template in Power Pages

In this blog, we’ll show you how to create a reusable, dynamic review card component in Power Pages using custom web templates. This allows yo...

11 days ago

Power Pages Actions in Visual Studio Code

Two years ago I posted about the features within Visual Studio Code to create assets in Power Pages. Since that time the team at Microsoft has...

16 days ago

Step-by-Step Guide for Using Power Fx in Power Pages (Preview)

In this blog, we’ll explore how to use Power Fx within Power Pages to build dynamic, interactive web applications. We’ll walk through key feat...

20 days ago

Working with Power Pages Web API

Introduction Microsoft Power Pages, previously known as Power Apps Portals, allows organizations to create external-facing websites that secur...

1 month ago

Power Pages Fundamentals #19: How to Use Liquid and FetchXML in Power Pages: Quick Read Series

In Power Pages one common scenario was to query dataverse and get details of a record based on some filter condition. This can be achieved in ...

1 month ago
Stay up to date with latest Microsoft Dynamics 365 and Power Platform news!
* Yes, I agree to the privacy policy