Qlik Cloud WordPress Plugin: updated version using Qlik Embed

[Ouadie]

If you’ve came across the initial Qlik Cloud Wordpress plugin on the Qlik Community Design blog and gave it a try, you probably have run into some issues with it. Today, I’m going to share a new updated version of the Qlik Cloud WordPress plugin that brings a more efficient way to embed Qlik Cloud analytics into your WordPress websites.

In this post, I'll walk you through the steps to install, configure, and use the new version of the plugin to bring your Qlik Cloud visualizations directly into your WP pages and posts.

Why the Update?

The previous version of our plugin relied on JWT tokens for auth, iframes (single integration API) and nebula.js for embedding, which worked but had limitations such as third-party cookies. Qlik Embed is the new embedding library and adopts better auth flows. In this version, I'm using OAuth impersonation to generate access token on the backend without need for users to interact with a login page.

Installation Steps

1. Install the Plugin

1. Log in to your WordPress Admin Dashboard.
2. Navigate to Plugins on the left sidebar.
3. Click on "Add New" at the top of the page.
4. Upload the zipped file (download it from GitHub here)
5. Locate the plugin and click "Install Now".
6. After installation, click "Activate".

Note: If you have the previous version installed, deactivate and delete it before installing the new one to avoid conflicts.

Configuring Qlik Cloud Wordpress Plugin

Before using the plugin, you'll need to set up OAuth impersonation in your Qlik Cloud tenant.

Create an OAuth Client

1. Log in to your Qlik Cloud tenant as an administrator.
2. Navigate to Management Console > Integrations > OAuth.
3. Click on "Create new" and fill in the required details:
   • Name: Give a recognizable name like "WordPress Integration".
   • Allowed Origins: Add your WordPress site's URL.
4. Select the right scopes to grant to the client from the Scopes list.
5. Check “Allow Machine-to-Machine (M2M)” and “Allow M2M user impersonation”
6. Change the consent method to Trusted
7. Save the client credentials (Client ID and Client Secret) to be used in WordPress Config.

Docs here: https://qlik.dev/authenticate/oauth/create/create-oauth-client-m2m-impersonation/

Make sure to read through the Guiding Principles of OAuth Impersonation: https://qlik.dev/authenticate/oauth/guiding-principles-oauth-impersonation

P.S: this method will create a number of anonymous users on your tenant and you need to implement a way to remove these users periodically (using a Qlik Application Automation / users API)

Configuring the Plugin

1. In your WordPress dashboard, go to Settings > Qlik Cloud Embed.
2. Fill in the required fields:
   • Host: e.g., https://your-tenant.region.qlikcloud.com.
   • Client ID: From the OAuth client you created.
   • Client Secret: From the OAuth client.
3. Click "Save Changes".

Using the Plugin

Embedding Sheets and Visualizations

With the plugin configured, you can now embed Qlik Cloud content using Shortcodes.

1. Embed an Entire Sheet/App

Use the [qlik-embed-app] shortcode:

[qlik-embed-app appid="1234-c56a-4062-ac50-377bba443e85" sheetid="12345-698f-449f-9a17-dca17eeadb71"]

Parameters:

• appid: App ID
• sheetid: Sheet ID

2. Embed Individual Visualizations/Objects

Use the [qlik-embed-object] shortcode:

[qlik-embed-object appid="1234-64317-8432" objectid="1234-5553-326432"]

Parameters:

• appid: App ID
• objectid: Object ID

3. Embed Selections bar

Use the [qlik-embed-selections] shortcode:

[qlik-embed-selections appid="1234-c56a-4062-ac50-377bba443e85"]

Parameters:

• appid: App ID

Tip:

Finding IDs in Qlik Cloud

1. Open your app in Qlik Cloud.
2. Navigate to the sheet or object you want to embed.
3. In the URL, find the sheet ID
   • Sheet ID comes after /sheet/
4. For object, right click on the chart, click on Embed, and look for objectid under the chart preview.

You can download the plugin here: https://github.com/qlik-demo-team/wp-qlik-saas-plugin

P.S: this plugin is maintained by myself. If you find any bugs or issues, please report them to me or create an issue on Github and I'll do my best to resolve them quickly.

Thank you!

[marcogiannuzzi_1990]

Hello,

thanks for this useful post!! 🙂 

I tried following all the steps and I obtain the following

qmfe-embed.js:2 Fatal error for embedded ui classic/app: Could not fetch access token using custom function - Error: Unexpected serverside authentication error (Status: 401, Code: )
(anonymous) @ qmfe-embed.js:2
I @ qmfe-api.js:1
await in I (async)
(anonymous) @ qmfe-embed.js:2
a @ qmfe-embed.js:2
7qmfe-api.js:1 Uncaught (in promise) Error: Could not fetch access token using custom function - Error: Unexpected serverside authentication error (Status: 401, Code: )

[Ouadie]

@marcogiannuzzi_1990  Hey Marco - it sounds like the function is having a problem getting an access token. I'm guessing there is a config issue on your OAuth client (unless there is just a typo on the client id and secret).
Can you follow this tutorial step by step to generate the client id and secret https://qlik.dev/authenticate/oauth/create/create-oauth-client-m2m-impersonation/ 
Make sure the consent method is set to trusted.

- Can you also test to see if new anonymous users are being created in your tenant? 

[dov]

Hello 

We have this errors : 

Enabled static auth injection on origin https://XXXXXX.eu.qlikcloud.com 
qlik-embed.js?ver=1:4


GET https://XXXXX.fr/wp-json/qs/v1/token  404 (Not Found)
getAccessToken @ qlik-embed.js?ver=1:4
(anonymous) @ qmfe-api.js:1
V @ qmfe-api.js:1
$ @ qmfe-api.js:1
(anonymous) @ qmfe-api.js:1
(anonymous) @ qmfe-api.js:1
Promise.then
ae @ qmfe-api.js:1
getRestCallAuthParams @ qmfe-api.js:1
I @ qmfe-api.js:1
await in I
(anonymous) @ qmfe-embed.js:2
a @ qmfe-embed.js:2Understand this error
qmfe-embed.js:2 Fatal error for embedded ui classic/app: Could not fetch access token using custom function - Error: Unexpected serverside authentication error (Status: 401, Code: )
(anonymous) @ qmfe-embed.js:2
I @ qmfe-api.js:1
await in I
(anonymous) @ qmfe-embed.js:2
a @ qmfe-embed.js:2Understand this error
7qmfe-api.js:1 Uncaught (in promise) m: Could not fetch access token using custom function - Error: Unexpected serverside authentication error (Status: 401, Code: )
at Y (https://cdn.qlikcloud.com/qmfe/qmfe-api/3.42.0/qmfe-api.js:1:8242 )
at https://cdn.qlikcloud.com/qmfe/qmfe-api/3.42.0/qmfe-api.js:1:11647 
Y @ qmfe-api.js:1
(anonymous) @ qmfe-api.js:1Understand this error
qmfe-api.js:1 Could not fetch access token using custom function - Error: Unexpected serverside authentication error (Status: 401, Code: )
G @ qmfe-api.js:1
I @ qmfe-api.js:1
await in I
f @ qmfe-api.js:1
T @ qmfe-api.js:1
(anonymous) @ qmfe-api.js:1
D @ qmfe-core.js:2
await in D
q @ qmfe-core.js:2
z @ qmfe-core.js:2
(anonymous) @ qmfe-embed.js:2
b @ qmfe-embed.js:2
Ce @ qmfe-embed.js:2
h @ qmfe-embed.js:2
g @ qmfe-embed.js:2
p @ qmfe-embed.js:2
ae @ qmfe-embed.js:2
re @ qmfe-embed.js:2
Promise.then
(anonymous) @ qmfe-embed.js:2
(anonymous) @ qmfe-embed.js:2
(anonymous) @ qmfe-embed.js:2
I @ qmfe-api.js:1
await in I
(anonymous) @ qmfe-embed.js:2
a @ qmfe-embed.js:2Understand this error
qmfe-core.js:2 Environment information could not be retrieved: Could not fetch access token using custom function - Error: Unexpected serverside authentication error (Status: 401, Code: )
D @ qmfe-core.js:2
await in D
q @ qmfe-core.js:2
z @ qmfe-core.js:2
(anonymous) @ qmfe-embed.js:2
b @ qmfe-embed.js:2
Ce @ qmfe-embed.js:2
h @ qmfe-embed.js:2
g @ qmfe-embed.js:2
p @ qmfe-embed.js:2
ae @ qmfe-embed.js:2
re @ qmfe-embed.js:2
Promise.then
(anonymous) @ qmfe-embed.js:2
(anonymous) @ qmfe-embed.js:2
(anonymous) @ qmfe-embed.js:2
I @ qmfe-api.js:1
await in I
(anonymous) @ qmfe-embed.js:2
a @ qmfe-embed.js:2Understand this error
qmfe-core.js:2 License backend returned an erroneous response - {"noAvailableLicenses":false,"noAvailableMinutes":false}
c @ qmfe-core.js:2
await in c
D @ qmfe-core.js:2
await in D
q @ qmfe-core.js:2
z @ qmfe-core.js:2
(anonymous) @ qmfe-embed.js:2
b @ qmfe-embed.js:2
Ce @ qmfe-embed.js:2
h @ qmfe-embed.js:2
g @ qmfe-embed.js:2
p @ qmfe-embed.js:2
ae @ qmfe-embed.js:2
re @ qmfe-embed.js:2
Promise.then
(anonymous) @ qmfe-embed.js:2
(anonymous) @ qmfe-embed.js:2
(anonymous) @ qmfe-embed.js:2
I @ qmfe-api.js:1
await in I
(anonymous) @ qmfe-embed.js:2
a @ qmfe-embed.js:2Understand this warning

[Ouadie]

Hi @dov - from the error, it looks like the very first call to /wp-json/qs/v1/token which is an endpoint within the plugin and has to do with wordpress fails.

- can you please let me know what WP version you're running? 

it could be that your WP REST API service is disabled. You can check that by navigating to  https://xxxxx.com/wp-json 

if it's working, it should return a big json object. Check under namespaces and see if you can spot qs/v1  (That's the endpoint that the plugin uses.) like below: