Qlik Community

Knowledge

Search or browse our knowledge base to find answers to your questions ranging from account questions to troubleshooting error messages. The content is curated and updated by our global Support team

Announcements
IMPORTANT security patches for GeoAnalytics Server available to download: READ DETAILS

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

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

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 on 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:

    In order 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.location.href = "https://yourtenant.eu.qlikcloud.com/login?qlik-web-integration-id=" + webIntegrationId + "&returnto=" + 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
guillaume_bon
Contributor
Contributor

@Damien_Villaret any news for us about JWT capabilities ?

Sonja_Bauernfeind
Digital Support
Digital Support

Hello @guillaume_bon !

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

guillaume_bon
Contributor
Contributor

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 ?

 

guillaume_bon
Contributor
Contributor

To my  Qlik account team

Jackie1232
Contributor
Contributor

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.

didierodayo
Partner
Partner

@Damien_Villaret 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

 

Sonja_Bauernfeind
Digital Support
Digital Support

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 

dagosto
Contributor II
Contributor II

Great article, thank you for sharing.

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

dagosto_0-1648571885979.png

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

dagosto_1-1648572086538.png

It fails when I am not logged in Qlik Cloud

dagosto_2-1648572210172.png

 

 

Damien_Villaret
Support
Support

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-bro...

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

dagosto
Contributor II
Contributor II

Thank you @Damien_Villaret 

I tried the new aproach but, still the same result.

When viewing the page both loged / not loged in routines work.

When viewing the page embeded inside SalesForce interface, it works when logged in, but fails to connect if I am logged out QSSaas

I wonder if there is a restriction from salesforce. Is there a way to open the login page in a new window?

Maybe it works.

Version history
Last update:
‎2022-05-10 03:03 PM
Updated by: