Warehouse
Data Management
Reporting
Workflows
User management
Guides
Deprecated
๐ฉ๐ป
Embedding API
This section describes how to embed a report in your website or your webapp. In order to do so you need to be able to modify your app's code as well as having admin access to Whaly.
Setting up your report for embedding
First of all go to setting > org admin > general settings for your org and copy your client secret as well as org slug you'll need to for later.
Getting your client secret
Then you need to get your embed token on the report you want to share. In order to do so you need to open the report you wish to embed and click on the share button. Once you see the drawer you can copy your embed token you'll need it for later.
Get your embed token
Now you are all set, we can start writing code ๐ค
Embed reports in your app
In order to secure your embed and to make sure that nobody can use your embed on their website we require you to generate and sign a JSON Web Token that you will pass as a query string parameter in the iframe that you embed. This way we ensure that only you who owns the client secret can create short live token that give your user access to your embed.
In order to do so you can check the following code:
1
import jwt from 'jsonwebtoken';
2
โ
3
// this routine must happen on server side as your secret should remain secret
4
const embedToken = "<MY_EMBED_TOKEN>";
5
const clientSecret = "<MY_CLIENT_SECRET>";
6
const orgSlug = "<MY_ORG_SLUG>";
7
โ
8
// we require you to generate a payload with the default filters you want to pass
9
// if you don't want to pass filters just input an empty object {}
10
// the filter payload is an object which keys are the apiName of the filter
11
// and the value is the value that you want to pass
12
โ
13
const payload = {
14
filters: {
15
myFilter: 1
16
},
17
expiration_date: Date.now() + 24 * 60 * 60 * 1000 // valid for 24h
18
};
19
โ
20
// generate and sign your JWT, please use the HS256 algorithm
21
const myToken = jwt.sign(payload, clientSecret);
22
โ
23
// generate the embed url
24
const embed_url = `https://app.whaly.io/${orgSlug}/embed/report/${embedToken}?token=${myToken}`
Copied!
You can then render your iframe using the templating system you want
1
<iframe src="<%= embed_url %>"
2
frameborder="0"
3
style="width: 100%;height: 600px"
4
allowfullscreen>
5
</iframe>
Copied!
Access your filters API Name
In order to set and retrieve your filters API Name you can edit your filter and click on the developer tab and set your apiName. Please note that filters API Name must be unique for a given report and are not set by default.
Setting an API Name
Last modified 6d ago