In this post, HSD’s Dynamics 365 Practice Lead – Thanura Wijesiri takes us through how you can add content into your portals through PowerApps.

If you’re working with PowerApps portals you may have come across requirements to inject content to your portal to meet client requirements. Some of the most common scenarios I have come across are adding tracking codes for analytics, embedding chat bots and adding meta tags to the header of the portal. Depending on the requirement, the placement of the snippet will need to change.

Before we go in to examples, let’s have a look at how the portal pages are structured with some of the pre-configured content snippet placeholders and web templates in PowerApps portals.

Here are some scenarios with examples on how to achieve them using these pre-defined placeholder snippets and web templates:

RequirementHow
Prevent Search Engines from Indexing portal pages (for sandbox environments)
Need to add noindex meta tags in the <head></head> element of the pages.
To do this you will need to use the “Head/Bottom” content snippet.
If you do not have the “Head/Bottom” content snippet, you can create one with type HTML and copy the tags to the html value of the snippet.

Add the following noindex meta tags to the “Head/Bottom” content snippet.

<meta name="robots" content="noindex,nofollow">
<meta name="googlebot" content="noindex">
<meta name="googlebot-news" content="noindex">

Once rendered it will look like:

The content of the “Head/Bottom” content snippet is added just before the closure of the head element.

Add scripts for portal analyticsDepending on the tracking/analytics tool you use you will need to place the snippets in the pages you would like to track.
 
For example google analytics with tag manager requires to add snippets to the
<head></head> element as well as the start of the <body></body> element.

For the head element content you would need to use the “Head/Bottom” content snippet similar to the first example.
If you need to add content to the start of <body> element then you will have to add it to the “header” web template of your page.
 
Please note that header is only rendered for pages that uses the header.

Any content added to the header will be rendered as a part of the header.

Header is added at the start of the <body> element.

e.g.

Add tracking code or other JavaScript functions, references and other content to the portalSimilar to the above analytics example, you can also use the “Tracking Code” content snippet to inject content to your portal. However the “Tracking code” content snippet does not require the “Header” web template to be used in your page as it is a separate snippet outside of the “Header” content.
 
The content of this snippet is added just before the closure of the <body> element but before the “Chat Widget Code” content snippet.

e.g.

Add a chat bot to portal pages“Chat Widget Code” Content snippet can be used to achieve this. The content of this snippet is rendered just before the closure of the <body> element.

More details at: https://docs.microsoft.com/en-us/dynamics365/omnichannel/administrator/embed-chat-widget-portal#embed-chat-widget-in-your-power-apps-portal

With the understanding of the page structure and pre-defined PowerApps Portals content snippets, you will have multiple options to tackle different requirements that may come up during your implementation.

Be sure to keep up to date with all of HSD‘s news and content here and on our LinkedIn.