Embedding a visualization or a sheet in a web page

You can integrate Qlik Sense visualizations or sheets into an iframe element on a web page with the Single Integration API. This could for example be a web page on your intranet. You select which visualization or sheet to embed, and make some settings to customize selections, interaction and appearance. Then you can copy the iframe code containing the URL of the object and add it to your web page.

The embedded object will be subject to the same access rules as the original object and app. This means that anyone who wants to view the embedded object must have:

  • Access to Qlik Sense.
  • Access to the app. If the app is unpublished (in My work), you are the only one with access.
  • Access to the sheet. If the sheet is unpublished (in My sheets) in a published app, you are the only one with access.
  • Access to any bookmark used for selection. Private bookmarks will be applied for you, but not for anyone else.
  • Same access to the data used in the selection as you, if section access is used to restrict data access.

Embedding a sheet

You can embed a sheet in your web page.

Do the following:

  1. Click Embed sheet in the global menu.

  2. Customize selections, appearance and interaction options for the embedded sheet.

  3. Click Open preview in new tab to see a preview of the embedded sheet.
  4. Click Copy.

You now have the iframe code of the sheet in your clipboard, ready to add to your web page.

Embedding a visualization

You can embed a visualization in your web page.

Do the following:

  1. Click Embed chart in the context menu of a visualization, or in the toolbar of a master visualization.

  2. Customize selections, appearance and interaction options for the embedded visualization.

  3. Click Open preview in new tab to see a preview of the embedded visualization.
  4. Click Copy.

You now have the iframe code of the visualization in your clipboard, ready to add to your web page.

Setting appearance and interaction

You can customize how you can interact with the embedded object.

  • Allow interaction

    You can select if you want the user to be able to interact with the embedded object.

  • Enable context menu

    You can select if you want the context menu to be available when the embedded object is right-clicked.

  • Language

    You can select which language to use in menus for the embedded object.

  • Theme

    You can select which theme to use for the embedded object.

Selections in the embedded object

You can choose if the user can make selections in the embedded object, and which selection state to show in the embedded object.

  • Use current selections

    You can select to use the current selections in the app.

  • Show selections bar

    You can select to show the selections bar above the sheet.

  • Allow selections

    You can select if you want the user to be able to make selections in the embedded object. You also need to enable Allow interaction.

  • Clear selections on reload

    You can select to clear all selections made in the app when the object is rendered.

  • Apply bookmark

    You can select to apply a bookmark and use the selections defined in the bookmark.

When the page containing the embedded object is rendered, the initial selection state is defined by the order of execution and your settings.

  1. Clear selections on reload

  2. Apply bookmark

  3. Use current selections

When you make selections in the embedded object, they will be replicated in the app. If you select Clear selections on reload, for example, and use the embedded object, selections are cleared in the app.

Tip: You can use Open preview in new tab to preview the embedded object, and interact without affecting selections in the app.

Limitations of embedded objects

  • Embed sheet and Embed chart features are not available on mobile devices.
  • The URL is limited to 2083 characters due to browser limitations. If your URL is too long, this is most likely due to a large number of individual selections.

    Tip: You can create a bookmark with the same set of selections, and apply the bookmark. This will create a shorter URL.

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?