Get started with qlik-embed web components

Embed your first Qlik visualization in minutes using qlik-embed web components and OAuth2 single-page application authentication.

Prerequisites

A Qlik Cloud tenant with at least one Analytics app and visualization
A text editor or IDE (VS Code, Notepad++, etc.)
An OAuth2 SPA client with:
- Scope: user_default
- Redirect URI: http://localhost:8080/oauth-callback.html (or your local dev URL)
- Allowed origin: http://localhost:8080

Step 1: Create your HTML file

Create a new file named index.html. For a minimal setup, start with basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Qlik Embed Quick Start</title>
</head>
<body>
  <h1>Embedded Qlik Visualization</h1>
  <div id="visualization"></div>
</body>
</html>

Or use the complete example at the end of this guide, which includes styling and both embed types.

Step 2: Add the qlik-embed script

In the <head> section of your HTML file, add the qlik-embed script tag. This initializes the qlik-embed library and configures your OAuth authentication:

<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>

Replace placeholders:

<QLIK_TENANT_URL>: Your Qlik Cloud tenant URL (for example, https://your-tenant.us.qlikcloud.com)
<QLIK_OAUTH2_CLIENT_ID>: Your OAuth client ID
<WEB_APP_CALLBACK_URI>: Your callback page URL (for example, http://localhost:8080/oauth-callback.html)

Step 3: Create the OAuth callback page

Create a new file named oauth-callback.html in the same directory as index.html:

<!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/api@2/oauth-callback.iife.js"
    ></script>
  </head>
</html>

Replace <QLIK_TENANT_URL> with your Qlik Cloud tenant URL (must match data-host in Step 2).

Step 4: Embed visualizations

In the <body> of index.html, add qlik-embed components. You can embed a single chart or multiple embeds.

Option A: Single chart

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

Option B: Full Qlik Sense interface

<qlik-embed
  ui="classic/app"
  app-id="<APP_ID>"
></qlik-embed>

Replace placeholders:

<APP_ID>: Your app ID
<OBJECT_ID>: Your visualization ID (for analytics/chart only)

Note

The analytics/chart UI renders nebula.js visualizations only. Use classic/app for the full Qlik Sense experience. See UIs and parameters for all options.

Step 5: Run your application

Start a local web server. If you have Python installed:

python -m http.server 8080

Or with Node.js:

npx http-server -p 8080

Open your browser to http://localhost:8080.
Click the Authorize button. The browser redirects you to Qlik Cloud login.
Log in with your credentials.

After authentication, you’re redirected back and your embedded visualization loads.

Note

If your server runs on a different port, update your OAuth client configuration and the data-redirect-uri in your HTML to match.

Troubleshooting

OAuth errors: Verify data-redirect-uri matches your OAuth client configuration and oauth-callback.html is in the same directory
Visualization not showing: Verify app-id and object-id are correct and you have permissions in Qlik Cloud
“Tenant not found”: Check your data-host URL matches your Qlik Cloud tenant

Next steps

Now that you have a working embed:

Explore other UI types (analytics/sheet, analytics/selections, and more)
Add interactivity with the ref API
Deploy to production
View the complete working example

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>
    <!-- Set data-auto-redirect to true to automatically redirect to the Qlik Cloud tenant for authorization -->
    <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-auto-redirect="false"
        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/api@2/oauth-callback.iife.js"
    ></script>
  </head>
</html>