Embed a visualization to a web application with an iFrame

Note: Where possible, use qlik-embed rather than this framework. Review the tutorial embedding Qlik Analytics using qlik-embed web components.

Third-party cookies: This tutorial leverages cookies for auth, which are blocked by some browser vendors. Please use an OAuth solution where possible, which doesn’t leverage cookies.

This tutorial is a step-by-step demonstration of embedding objects using iFrames, which is a simple way to get started with embedding Qlik available via the Qlik Sense interface.

If you want to build more custom and integrated experiences for your users, take a look at the other tools and technologies available for embedding Qlik technologies in embedding overview.

1: Generate the HTML code for the specific object

Qlik Cloud supports two types of embedded objects in an iframe: sheets and charts.

To embed a Qlik Sense sheet, open the Qlik Sense application that you wish to embed, open the sheet of interest, and click the drop down menu in the upper left corner. Select “Embed sheet”.

Dropdown menu with embed sheet highlighted

If you instead wish to embed an individual chart/object, rather than a full sheet, right-click an object, click the Navigation button (three dots), then select Share > Embed.

Right click menu with embed chart highlighted

Once you’ve done this for either a sheet or chart/object, a window appears allowing you to configure various properties for the embedded object. At the bottom of this window, you’ll see the HTML code for the iframe, which can be inserted directly into your web application or mashup.

Note: The embed dialog also shows you the ID of the sheet or object you’ve selected to embed. These IDs are useful if you are building integrations with other Qlik APIs or frameworks such as the capability APIs and enigma.js.

Embed sheet preview with sheet ID and iframe highlighted

2: Configure a Content Security Policy

If you haven’t already, configure a Content Security Policy entry for the web application that will embed the iframe, setting the frame-ancestors directive.

For more information on how to do this, see managing Content Security Policies for embedding iframes.

3: What next?

Authentication

This approach assumes that you are leveraging an interactive Identity Provider on Qlik Cloud. If your web application does not leverage the same configuration as your Qlik Cloud tenant, then end users may be redirected away from your web application to sign in to Qlik Cloud before they can see embedded content.

To improve this experience for your end users, explore:

Additionally, if you have users who access iframe embedded content on devices which do not support third party cookies, see third-party cookie handling with embedded content.

Customization