article Qlik Cloud Analytics: How to embed a chart in an iFrame in Official Support Articles

Qlik Cloud Analytics: How to embed a chart in an iFrame

Damien_V — Mon, 08 Jul 2024 10:23:30 GMT

Please note that due to changes in how browsers handle third-party cookies, you may wish to instead leverage the new qlik-embed framework with OAuth2 for your embedding needs, rather than the guidance in this tutorial.

In Qlik Cloud Services (Qlik Sense Enterprise SaaS), it is possible to get the iFrame HTML code to embed a chart in a webpage by right-clicking that chart and choosing "embed chart".

However, just placing this code on a web page is not sufficient to handle the authentication part.

The information provided in this article provides an example of how this can be achieved. Further customization is likely necessary. For assistance, join our active community in the Integrations and Extensions forum or contact our Consulting Services for an engagement.

Environments:

Qlik Cloud Services April 2019 and later

Resolution:

The information in this article is provided as-is and to be used at own discretion. Depending on tool(s) used, customization(s), and/or other factors ongoing support on the solution below may not be provided by Qlik Support.

Steps

Open the Qlik Tenant Management Console
Scroll to Integration Settings
Open Web
Click Create new
Fill out the form:
- Name: The name of the integration
- Add an origin: The allowed origins for the requests (such as the webserver hosting the integrations)
Click Create to confirm
Open Content Security Policy in the Integrations Settings section
Click Add
Fill out the form:
- Name: The name of the integration
- Origin: The allowed origins for the requests (such as the webserver hosting the integrations)
- Directive: Choose frame-ancestors
Click Add to confirm
Copy the script provided in this example:

To handle the authentication and be able to see the chart on an external web page, the parent site needs to do a redirection and let the user authenticate, below is a code example of how to do that.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript"> const webIntegrationId = "g-yrbnOz9wV5-YnIqYLZMgfAxf_iKg30"; function login() { function isLoggedIn() { return fetch("https://yourtenant.eu.qlikcloud.com/api/v1/users/me", { method: 'GET', mode: 'cors', credentials: 'include', headers: { 'Content-Type': 'application/json', 'qlik-web-integration-id': webIntegrationId, }, }).then(response => { return response.status === 200; }); } return isLoggedIn().then(loggedIn => { if (!loggedIn) { // check login window.top.location.href = "https://yourtenant.eu.qlikcloud.com/login?qlik-web-integration-id=" + webIntegrationId + "&returnto=" + top.location.href; throw new Error('not logged in'); } }); } login() </script> </head> <body style="height:600px;"> <iframe src="https://yourtenant.eu.qlikcloud.com/single/?appid=9539b869-1c84-4e6d-9129-4c5b031ca88a&obj=WJhPv&opt=ctxmenu,currsel" style="border:none;width:100%;height:100%;"></iframe> </body> </html>
Paste it into a new file using Visual Studio Code and save it with the HTML extension
Replace all mentions of yourtenant in the script with the name of your Qlik Sense SaaS tenant
Copy the Web Integration ID from the Web Integration menu and paste it into the script at:
const webIntegrationID = "IDGOESHERE";
Add the link to the Qlik App Object you want to embed in the <iframe> section:
<iframe>src="linktotheobjecthere"></iframe>
Save the file and place it where your web server can read it.

Re: Qlik Cloud Services: How to embed a chart in an iFrame

Claudiu_Anghelescu — Sat, 30 Jan 2021 21:17:20 GMT

Hi,

I'm trying to embed a chart using iFrame on my website www.claudiuanghelescu.xyz from Qlik Sense Business Cloud but I receive the error:

I already configured the settings.

Is it needed to have HTTPS instead of HTTP?

Re: Qlik Cloud Services: How to embed a chart in an iFrame

Damien_V — Mon, 01 Feb 2021 09:41:49 GMT

Hello @Claudiu_Anghelescu

Yes, you should use HTTPS, otherwise the browser will block the request for "Mixed content"

Re: Qlik Cloud Services: How to embed a chart in an iFrame

Claudiu_Anghelescu — Tue, 09 Feb 2021 12:22:20 GMT

Thank you!

I've installed SSL certificate to use HTTPS and now it's working.

There is a way to keep authentication always open, maybe using a token?

The chart is visible only if I'm authenticated on the tenant, otherwise I receive the below message:

Re: Qlik Cloud Services: How to embed a chart in an iFrame

Damien_V — Tue, 09 Feb 2021 13:54:11 GMT

Hello @Claudiu_Anghelescu

If you've followed the example in this article, it is expected that you are redirected to your Identity Provider if you are not logged in yet when you open your site.

At this moment, it's not possible to provide an authentication token, but it is on the roadmap, stay tuned.

Re: Qlik Cloud Services: How to embed a chart in an iFrame

manuelvallejos90 — Wed, 17 Feb 2021 00:01:44 GMT

@Damien_V please let me know when you have the authentication token available, otherwise i should buy a aditional analyzer licence

Re: Qlik Cloud Services: How to embed a chart in an iFrame

Claudiu_Anghelescu — Wed, 17 Feb 2021 05:41:38 GMT

I bought the professional licence thinking that I will be able to share my insights as interactive dashboards/charts with other people on my blog/personal website. Has no sense to ask for login.

For example Tableau has Tableau Public, through PowerBI I can publish my work; and everything is for free. Even if I paid for Qlik Sense, the result is not as expected.

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

manuelvallejos90 — Thu, 25 Mar 2021 12:31:37 GMT

@Damien_V i bought Sense Cloud Enterprise a few months ago and I want to know when will be released the authentication token feature

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

Jeffrey_Goldberg — Thu, 25 Mar 2021 15:20:02 GMT

@manuelvallejos90 when you say authentication token what do you mean? Are you asking about JWT capabilities or OAuth2 or something else?

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

manuelvallejos90 — Thu, 25 Mar 2021 16:32:16 GMT

@Jeffrey_Goldberg I need to share sheets on my intranet to show others without asking to log in, that is what @Damien_V said it's on the roadmap

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

JamesTan — Tue, 04 May 2021 07:44:07 GMT

Hi,

Is there anyway that i can embed the charts from Qlik Sense Business to localhost app?

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

guillaume_bon — Tue, 11 May 2021 20:06:20 GMT

@Damien_V any news for us about JWT capabilities ?

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

Sonja_Bauernfeind — Wed, 12 May 2021 06:13:36 GMT

Hello @guillaume_bon !

JWT capabilities are available on a request basis. See Create Signed Tokens for JWT Authorization. It is not yet generally available.

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

guillaume_bon — Thu, 13 May 2021 07:03:59 GMT

Hello @Sonja_Bauernfeind !

Thanks for the answer ... have to make a request to my to test the functionnality on my tenant on Qlik Business.
Does anyone already test it ?

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

guillaume_bon — Thu, 13 May 2021 07:48:27 GMT

To my Qlik account team

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

Jackie1232 — Thu, 24 Jun 2021 14:06:03 GMT

Hi ,

Is there anyway that i can embed the charts from Qlik Sense Business to localhost app? The problem im having is that my localhost is not in https and iframe could not work.

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

didierodayo — Fri, 03 Dec 2021 04:04:06 GMT

@Damien_V Hi Damien,

please do you have a similar configuration for embedding a Qlik enterprise SaaS sheet into Salesforce Tab?

I have embedded the URL directly but the height is not adjusted automatically based on the screen. I am wondering if something similar can be built to dynamically adjust the height

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

Sonja_Bauernfeind — Fri, 03 Dec 2021 12:58:23 GMT

Hello @didierodayo

Please post this question directly in our forums to get assistance from our broader community and our employees monitoring those forums: Integration, Extension, & API.

All the best,
Sonja

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

dagosto — Tue, 29 Mar 2022 16:47:01 GMT

Great article, thank you for sharing.

It works fine when I preview the page from the Developer Console:

When I access the page through the Sales App, it works once logged in to qlik cloud account.

It fails when I am not logged in Qlik Cloud

Re: Qlik Sense Enterprise SaaS: How to embed a chart in an iFrame

Damien_V — Wed, 30 Mar 2022 09:15:05 GMT

Hello @dagosto

Did you try with window.top.location.href instead as described here:
https://community.qlik.com/t5/Integration-Extension-APIs/Embedded-analytics-using-iframe-only-is-broken-if-not-logged-in/td-p/1822196

If it doesn't help, it could be that it's the browser blocking the redirection.