Embed Qlik Analytics using qlik-embed web components

In this tutorial, you will embed Qlik Sense analytics content in a web page using qlik-embed web components and an OAuth2 single-page application client entry from your Qlik Cloud tenant.

If you want to skip the tutorial and get right to the code, it’s available at the bottom of this page.

Prerequisites

  • A Qlik Cloud tenant that is not Qlik Sense Business.
  • A development environment to create and edit HTML files
  • Basic understanding of HTML and running basic web applications.

Variable substitution and vocabulary

Throughout this tutorial, variables will be used to communicate value placement. The variable substitution format is <VARIABLE_NAME>. Here’s a list of variables that appear in the sample code.

VariableDescription
<QLIK_TENANT_URL>The web address for the tenant. Equivalent to tenant.region.qlikcloud.com.
<QLIK_OAUTH2_CLIENT_ID>The Client ID for the OAuth2 single-page application entry in the tenant.
<WEB_APP_CALLBACK_URI>The Redirect URL for the OAuth2 client to provide an access token.
<WEB_APP_URL>The web address for your web application where qlik-embed is used.
<APP_ID>The unique identifier of the application.
<SHEET_ID>The unique identifier of the sheet.
<CHART_ID>The unique identifier of a visualization.
<BOOKMARK_ID>The unique identifier of a bookmark in the application.

1.0 Setup an OAuth client application in your Qlik Cloud tenant

Have you set up an OAuth client? If not, do that now before proceeding.

1.0.1 Reference an OAuth callback page to handle the authorization lifecycle

The OAuth callback page handles access token requests to Qlik Cloud on behalf of your web application. The benefit provided by the callback page is that an OAuth client single-page application configuration requires only this one page from your web application defined in the OAuth client registration’s allow list.

In the OAuth client configuration you created for this application, edit the settings and add a redirect URL entry for the oauth_callback.html file you will create later in this tutorial. Enter the URL for your web application plus the callback filename and click Add. The URL should appear something like https://web-app.example.com/oauth_callback.html.

1.0.2 Add an allowed origin to the OAuth client configuration

In the OAuth client configuration you created for this application, edit the settings and add an allowed origin URL entry for the web application. The URL should appear something like https://web-app.example.com

2.0 Add qlik-embed to your web application

If you have not already done so, you need to create a web application and a development environment with an html page. Review this example application.

2.0.1 Add the script configuration for qlik-embed

In the HTML file of your web application, add a script element as a child of the head element. Insert the following attributes into the script tag.

<script
  crossorigin="anonymous"
  type="application/javascript"
  src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/index.min.js"
  data-host="<QLIK_TENANT_URL>"
  data-client-id="<QLIK_OAUTH2_CLIENT_ID>"
  data-redirect-uri="<WEB_APP_CALLBACK_URI>"
  data-access-token-storage="session"
></script>

2.0.2 Apply values to the script

Configure the following items to connect your web application to Qlik Cloud.

  • data-host: The URL to your Qlik Cloud tenant. For example, https://example.us.qlikcloud.com.
  • data-client-id: The client ID for the single-page application OAuth2 client registered for this web application.
  • data-redirect-uri: The location of the web page the OAuth2 client will call back to when authorization requests are made from your web application to your Qlik tenant. This web page is located in your web application and will be added in a later step of this tutorial.

3.0 Embed a chart object to your web application

In the body of the HTML file, add a <qlik-embed> element. Insert the following attributes into the <qlik-embed> tag. This example sets the ui attribute to object, indicating to qlik-embed that you want to embed a specific visualization from a Qlik Sense application.

<qlik-embed
  ui="analytics/chart"
  app-id="<APP_ID>"
  object-id="<CHART_ID>"
></qlik-embed>

Note: ui=“analytics/chart” renders objects created using the nebula.js visualization framework. The chart object you specify will render properly only if it is built using nebula.js. Please click here for an up to date list of nebula compliant visualizations.

3.1 Embed the Qlik Sense user interface to your web application

You can embed the complete Qlik Sense user experience into your web application with <qlik-embed>.

In the body of the HTML file, add a <qlik-embed> element. Insert the following attributes into the <qlik-embed> tag. This example sets the ui attribute to classic/app, indicating to qlik-embed that you want to embed the Qlik Sense user experience.

<qlik-embed
  ui="classic/app"
  app-id="<APP_ID>"
  sheet-id="<SHEET_ID>"
  bookmark-id="<BOOKMARK_ID>"
></qlik-embed>

Note: Not all capabilities of the Qlik Sense user experience work in this embedded implementation. Review the current limitations.

4.0 Create the OAuth callback page in your web application

Add an HTML file named oauth_callback.html to your web application. Enter the code making sure to change the data-host property to reference your Qlik Cloud tenant URL, for example, https://example.us.qlikcloud.com.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script
      crossorigin="anonymous"
      type="application/javascript"
      data-host="<QLIK_TENANT_URL>"
      src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/oauth-callback.min.js"
    ></script>
  </head>
</html>

4.0.1 Refer the OAuth callback page

In the qlik-embed script configuration you added to the HTML file at step 2.0.1, update the data-redirect-uri attribute in the script configuration where you are referencing embed-web-components to reflect the URI for the callback page.

5.0 Run the application

Start your web application. When the page loads you will see a green Authorize button where you expect the embedded analytics to appear.

5.0.1 Authorize the application

Click the Authorize button. You will be redirected to authenticate to your tenant. Upon successful login, you will redirect back to your web application and the embedded analytics will render in the browser.

Full code

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      body,
      html {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        font-size: 14px;
        background-color: #f5f5f5;
        color: #333;
        height: 100%;
        width: 100%;
      }
      .container {
        padding: 8px;
        gap: 8px;
        position: relative;
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        box-sizing: border-box;
      }
      .classic-app {
        height: 800px;
        width: 1200px;
        border: 1px solid #bbb;
        flex-grow: 1;
        border-radius: 3px;
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
        position: relative;
        box-sizing: border-box;
        overflow: auto;
        position: relative;
      }
      .viz {
        width: 600px;
        height: 600px;
        padding: 16px;
        border: 1px solid #bbb;
        border-radius: 3px;
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
        position:relative;
      }
    </style>
    <title>@qlik/embed-web-components example</title>
    <script
        crossorigin="anonymous"
        type="application/javascript"
        src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/index.min.js"
        data-host="<QLIK_TENANT_URL>"
        data-client-id="<QLIK_OAUTH2_CLIENT_ID>"
        data-redirect-uri="<WEB_APP_CALLBACK_URI>"
        data-access-token-storage="session"
    ></script>
  </head>
  <body>
    <div id="main-app">
      <div class="container">
        <h1>@qlik/embed-web-components quickstart example</h1>
        <h2>For a step-by-step tutorial <a href="https://qlik.dev/embed/qlik-embed/quickstart/qlik-embed-webcomponent-quickstart/" target="_blank" rel="noopener noreferrer">click here</a>.</h2>
        <h2>Make sure to configure the html files to point to your Qlik Cloud tenant.</h2>
      </div>
      <div id="analytics-chart" class="container">
      <h2>qlik-embed analytics/chart embeds a chart in the page.</h2>
      <h3><i>Renders only nebula.js visualizations.</i></h3>
      <div class="viz">
        <qlik-embed
          id="visualization"
          ui="analytics/chart"
          app-id="<APP_ID>"
          object-id="<OBJECT_ID>"
        ></qlik-embed>
      </div>
      <div id="classic-app" class="container">
        <h2>qlik-embed classic/app embeds the full Qlik Sense client in the page.</h2>
        <div class="classic-app">
          <qlik-embed
            ui="classic/app"
            app-id="<APP_ID>"
            sheet-id="<SHEET_ID>"
          ></qlik-embed>
        </div>
      </div>
    </div>
  </body>
</html>

oauth-callback.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script
      crossorigin="anonymous"
      type="application/javascript"
      data-host="<QLIK_CLOUD_TENANT_URI>"
      src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/oauth-callback.min.js"
    ></script>
  </head>
</html>

Was this page helpful?