Qlik Fix: How to Embed a chart in an iFrame from Qlik Sense Enterprise SaaS

[Troy_Raney]

This video is part of the Qlik Fix Video series. If you found this video useful, check out the other Qlik Fix Videos.

This video will demonstrate how to embed a chart in an iFrame from Qlik Sense Enterprise SaaS using APIs.

Here is a link to more information in the Support Knowledge Base:
Qlik Cloud Services: How to embed a chart in an iFrame - Article

Video transcript:

Hi and welcome to Qlik Fix!

This video will demonstrate how to embed a chart in an iFrame from Qlik Sense Enterprise SaaS using APIs.

First, from your Qlik tenant management console, in the Integration settings

Under Web, click on Create New to start the web integration setup.

Enter the name of the WebServer. In this case, this is the name of my IIS server.

Add that name address as an allowed origin.

This is the Web Integration ID that will be used later.

Also, create the content Security Policy.

In this example, the same name is used.

Select Frame Ancestors

Add.

This setting allows embedding only from the parent website listed here.

Next, copy the script from example in this article on Qlik Community,

Paste it into a new file using Visual Studio Code.

Save it with the html extension.

Next, replace “YourTenant” with the actual name of your Qlik Sense SaaS tenant.

Cntrl F will open this find replace window.

Then copy the Web Integration ID that was just created.

Paste it into the script here.

Now the link to the Qlik app object you want to embed is needed.

This example will use the demo app “Consumer Sales”.

This app is available for download from Demos dot Qlik dot com

I’ll fetch this map object here.

Just right click.

Choose “Share”

And then “Embed”

Here is the iFrame link. Just click on the Copy button.

And replace this whole block here by pasting in the link.

Save the file.

Now place the file where the webservice can read it.

This is the IIS root folder.

I will run chrome as a different user to show how this sample code will redirect to your identify provider.

I’m adding a new person in Chrome.

Now, enter the name of the IIS webserver and the page that was just created.

The IDP or Identify provider in this case is Auth 0

The iFrame is loaded.

And Qlik map object can be seen and interacted with.

I hope this helped.

Attached is a downloadable .mp4 video file for those who cannot view YouTube videos.

#QlikSupport