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

Damien_V · Jul 8, 2024 6:23:30 AM

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.

manish_B · ‎2025-03-18

Hi @Damien_V , @Sonja_Bauernfeind , @mickael_b2boost

I am using Qlik Cloud embedding with the OAuth method to obtain an access token. Currently, I am embedding my app using the following tag:

<qlik-embed id="visualization" ui="classic/app"
disable-cell-padding="true" (error)="onQlikError($event)">
</qlik-embed>

This setup provides the full app experience. However, my requirement is to display only the sheets available in my tenant while ensuring that users have a read-only view with no interaction capabilities.

Could you please provide the correct configuration for the <qlik-embed> tag to achieve this?

I dont want to use web-integration, right now its working only with OAUTH.

Thank you!

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