Embedding charts and sheets into web apps

Embedding objects into your web application is fairly straightforward with Qlik Sense SaaS. This tutorial is a step by step demonstration of embeding objects as iframes.

Qlik Sense SaaS supports two types of embeddable objects in an iFrame: sheets and charts. To embed a Qlik Sense sheet, click the drop down menu in the top left hand corner when the app is open. Select “embed sheet”.

Dropdown menu with embed cheet highlighted

To embed an individual chart/object, right click the object itself and select “embed chart“.

Right click menu with embed cheet highlighted

Once you've done this a window should appear allowing you to configure various properties for the embedded object. At the bottom of this window, you'll see the code for the iframe, which can be pasted directly into an HTML page. Also note that you can find the object id and sheet id below the preview window which can be used with Qlik capability APIs.

Embed cheet preview with sheet id and iframe highlighted

Let’s test if this works. Copy the URL from the iframe’s src attribute, and paste it into a new tab in your browser. You should now see the chart or sheet.

Line chart

If you see an 404 not found page, you are either not authenticated or the resource isn't accessible. Check your CSP setup on Qlik Sense SaaS and authentication module.

Once this is clear, you can paste the iFrame code into a html page. The result should be something like this example on jsfiddle :

jsfiddle with embedded charts


    Was this page helpful?