Embedding Qlik Sense in web applications

Introduction

Qlik Sense apps, sheets and visualizations can be embedded in for example:

  • Portals
  • Web applications
  • Intranet and Extranet sites

There are different ways of embedding the Qlik Sense content:

  • iFrame integration using the URL Integration APIs
  • Div integration using the JavaScript libraries
  • Standard Qlik Sense charts and custom visualization extensions can be created programmatically without having to be built in the Qlik Sense UI first, using the qlik-visual web component

Building mashups

Embed Qlik Sense content with Dev Hub

Dev Hub is a development toolbox that helps you getting started building solutions with Qlik Sense as well as understanding the APIs.

Note: There is no separate installation package or additional license necessary for using the capabilities of Dev Hub. The editors, templates and code examples are provided with your default installation of Qlik Sense.

Dev Hub

Mashup editor

The Mashup editor is an editor for JavaScript files, HTML files and QEXT files. It can be used to create mashups to display Qlik Sense data on your website. You can use the templates provided with Qlik Sense to get started building your first mashup.

Your Qlik Sense installation comes with a mashup example, which provides guidance for how to build your own mashup.

Mashup editor

Single configurator

The Single configurator is a tool that provides an easy way of creating simple mashup pages without having to write any code at all. It creates an URL that returns a complete HTML page containing for example an embedded Qlik Sense visualization. This URL can be embedded in a web page, for example by including it in an iframe.

Single configurator

Build mashups using the JavaScript libraries

Learn how to create and build a basic mashup, displaying content from a supplied app. Use the examples provided to learn at your own pace.

Getting started building mashups

Relevant APIs

Qlik Sense provides a number of JavaScript-based APIs for embedding Qlik Sense content:

  • URL Integration APIs for iFrame integration
  • JavaScript APIs for embedding objects in web pages, including the Backend API for communicating with the backend of Qlik Sense.

In addition to the above, you can also use the Qlik Engine JSON API, which is a WebSocket protocol that uses JSON to pass information between the Qlik Associative Engine and the clients.

Qlik Sense APIs

Create and modify visualizations on the fly

Qlik visual is a custom element definition, <qlik-visual>, that uses the Visualization API and exposes it as a web component. It allows you to create and modify visualizations on the fly without making use of the Qlik Sense client.

qlik-visual web component

Embed Qlik Sense content with URL integration APIs

The App Integration API provides parameters that can be used to create an URL that returns a complete HTML page containing the embedded app. This URL can be embedded in a web page, for example by including it in an iframe.

You can also integrate single Qlik Sense visualizations, sheets or snapshots into an iframe. You use the Single Integration API to define how the object should be integrated into your web site

App integration

Single integration

Build mashups using Qlik Explorer for Developers

Qlik Explorer for Developers is a development toolbox created to simplify the process of integrating Qlik Sense functionality into other environments. It provides quick access to relevant information from your Qlik Sense environment, which for instance makes it easy to integrate Qlik Sense visualizations into an existing web site.

Qlik Explorer for Developers

 

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?