Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW

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

No ratings
cancel
Showing results for 
Search instead for 
Did you mean: 
Damien_Villaret
Support
Support

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

Last Update:

Jan 19, 2023 11:46:29 PM

Updated By:

Damien_Villaret

Created date:

Sep 26, 2019 9:56:23 AM

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

  1. Open the Qlik Tenant Management Console
  2. Scroll to Integration Settings
  3. Open Web
  4. Click Create new 
  5. 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)
  6. Click Create to confirm
  7. Open Content Security Policy in the Integrations Settings section 
  8. Click Add
  9. 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
  10. Click Add to confirm
  11. 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>​


  12. Paste it into a new file using Visual Studio Code and save it with the HTML extension
  13. Replace all mentions of yourtenant in the script with the name of your Qlik Sense SaaS tenant
  14. Copy the Web Integration ID from the Web Integration menu and paste it into the script at:
    const webIntegrationID = "IDGOESHERE";​
  15. Add the link to the Qlik App Object you want to embed in the <iframe> section:
    <iframe>src="linktotheobjecthere"></iframe>
  16.  Save the file and place it where your web server can read it. 

 

 

 

Labels (2)
Comments
Claudiu_Anghelescu
Specialist
Specialist

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:

Claudiu_Anghelescu_3-1612041327791.png

 

I already configured the settings.

Claudiu_Anghelescu_4-1612041377268.pngClaudiu_Anghelescu_5-1612041396474.png

 

Is it needed to have HTTPS instead of HTTP?

Damien_Villaret
Support
Support

Hello @Claudiu_Anghelescu 

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

Claudiu_Anghelescu
Specialist
Specialist

Thank you!

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

Claudiu_Anghelescu_0-1612873196372.png

 

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:

Claudiu_Anghelescu_1-1612873287022.png

 

Damien_Villaret
Support
Support

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.

manuelvallejos90
Contributor
Contributor

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

Claudiu_Anghelescu
Specialist
Specialist
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.
manuelvallejos90
Contributor
Contributor

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

Jeffrey_Goldberg
Employee
Employee

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

manuelvallejos90
Contributor
Contributor

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

JamesTan
Contributor
Contributor

Hi,

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

Version history
Last update:
‎2023-01-19 11:46 PM
Updated by: