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

How to Add a Model-Driven App Chart to a Power Pages Portal using Liquid Code

Integrating charts from a model-driven app into a Power Pages portal can enhance data visualization and improve user experience by providing r...

15 hours ago

{Do you know} Create event portals with event and registration details using Power Pages in Dynamics 365 Customer Insights

Hello Everyone,Today I am going to share my thoughts on creating the event portals with event and registration details using Power Pages in Dy...

16 hours ago

Power Pages: Configure Entra External ID

When building a Power Pages website where you will have external stakeholders signing in, it is highly recommended to use an external authenti...

23 hours ago

Power Pages – Create Operation using WebAPI

Power Pages is an enterprise-grade, low-code development platform that allows external users to interact with Dataverse. To perform CRUD (Crea...

8 days ago

Power Pages | ‘You do not have permissions to access this site’ issue

We have a website, and when one of the users tried to access it, they received the following message: You don’t have access to this Reas...

9 days ago

Use Governance Controls to Disable Anonymous Access in Power Pages

In today’s digital world, most businesses and organizations prioritize protecting sensitive data. Power Pages gives administrators the p...

9 days ago

Power Pages CRUD Operations Using WebAPI

Power Pages is an enterprise-grade, low-code development platform that allows external users to interact with Dataverse. To perform CRUD (Crea...

15 days ago

Power Pages Fundamentals #17: Dynamic User Greeting in Power Pages with Liquid Template: Quick Read Series

In most of the applications it is a common thing to show logged in user name on the top of the page somewhere at corner right . In Traditional...

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