Integrating Qlik objects into web apps

Understanding web integrations

Web integration for Qlik is nothing new. It was introduced in QlikView, and Qlik Sense was created with built-in capabilities for extending and integrating your apps. For many similar products, user interactions are restricted to the front-end elements: buttons, charts, filters, etc.

With Qlik, developers can leverage APIs to merge Qlik with their own system. These APIs enable interactions with the back-end (the Qlik Analytics Engine) and are no longer limited to the software’s native front-end, opening many possibilities for integration.

Ways to use web integrations

There are 4 main ways to integrate Qlik components into your web application:

  • Embed using an iFrame
  • Using Qlik's Visualization API to export charts and sheets
  • Using Qlik's Capability APIs to manage data and create your own visualizations
  • Using enigma.js and the Engine API


Using an iFrame is the simplest, but least flexible kind of web integration. Every chart or table in Qlik Sense has an ID and an URL, which can be easily found. To embed a sheet, click the drop down menu on top left hand corner and select “embed sheet”.

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

In the popup window, you are able to modify various properties for the embed object, including language and interaction. In the bottom of the panel, the code for the iframe is displayed, which can be pasted directly into a HTML page. Also note that you can find the object ID/sheet ID below the preview window, which can be used with the Qlik Capability APIs.

A single line of code extracted, therefore, can be added into an existing website to embed a Qlik chart to a web page. Put multiple iframes into the site, and you can very quickly have a custom dashboard embedded. So in less than 1 minute, you can build a web page with four lines of code copied:

Required skill level: ★☆☆☆☆

Visualization API

The Walkers Dashboard is a great example on the Qlik Demo site which uses Qlik charts to show stats on The Walking Dead. This dashboard is a mashup of on-the-fly Qlik objects and traditional web elements. Different from an iframe, charts are rendered using the Visualization API to control the user interaction and object retrieval. This means faster and cleaner execution, customizable elements, and other features.

Required skill level: ★★☆☆☆

Creating Your Own Visualization with the Capabilities APIs

Qlik Sense is more than just business intelligence software. By using the capabilities API, users may create their own custom visualizations powered by a Qlik application, like the Maple Leafs Dashboard shown in the preceding image. In this use case, Qlik is no longer a visualization server. It's a data warehouse and data analytics engine (Qlik’s Associative Engine) behind your dashboard. Custom code and/or third-party libraries handle the presentation of the visualization, opening a world of possibilities for developers.

Required skill level: ★★★☆☆

enigma.js and Qlik Associative Engine JSON-RPC API

While most developers may be happy to use the preceding methods to integrate Qlik, some may need to get down to the nuts and bolts of the Qlik Analytics Engine for their custom web application. For these cases, using enigma.js and the Qlik Associative Engine's JSON-RPC API can help them to achieve the high complexity embedding they need. The Engine API is a websocket protocol which enables developers to run almost every useful function and call available in Qlik Sense. enigma.js is a wrapper library which makes communicating with the engine easier with javascript rather than using the straight websockets. While the Capability APIs, for example, are run from a user’s browser, enigma.js can be run on an application server to interact with Qlik before serving a web page to a user. This means integration with Qlik Sense is highly flexible and easily integrated in a lightwieght, powerful way.

Required skill level: ★★★★★

Was this page helpful?