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,
- You have at least one Portal
- Omnichannel is installed
- Power Virtual Agent bot is configured to hand of chat conversations to Omnichannel
After having the above pre-requisites done, follow the below steps,
- From the "Omnichannel admin center" model-driven application
- Go to Workstreams and create and configure a new workstream based on your channel
- Enter your stream record, and click on "Copy code snippet"
- Switch to "Portal Management" model-driven app
- Create a new content snippet and past the copied snippet from Omnichannel work steam
- Go to "Web Templates" and enter the "Footer" record
- 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>
- 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
- Refresh your portal and you will see the chat widget displayed!
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 moreRelated posts
Clean and Maintainable Power Pages: 5 Tips for Writing Modular Code (JavaScript, Liquid, and FetchXML Efficiently)
In Power Pages development, efficiency and scalability is important. Whether you’re building multi-step forms, handling dynamic validati...
Dynamic File Attachment Grid in Power Pages Using JavaScript and Web API
Managing and displaying file attachments in Power Pages is a common requirement for business applications built on the Dataverse. In this blog...
Updating record using Custom Button Power Pages
Requirement Power Pages provides a flexible platform to build low-code, externally facing web applications on top of Dataverse. A common requi...
The refresh token has expired due to inactivity when connecting to Power Pages using Power Apps CLI – Quick Fix
Hi Folks, This post is about a quick fix for an error occurred with Power Apps CLI. I was trying to connect to my organization using CLI and t...
Power Pages – Hide/Show fields, Controls, Tabs using reusable code for basic form, web page, liquid template, multistep form.
Using reusable code especially in platforms like Power Pages or any web-based environment gives several significant advantages in terms of eff...
Microsoft Power Pages: The authentication key for your portal will expire
I saw the below Notification today, while I was working on the Portal requirements. Notification:The authentication key for your portal will e...
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...
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...
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...