Embedded Dashboards via iframe

The dashboard iframe allows you to embed the same UX you see in your own Kable dashboard within your developer portal.

🚧
You should choose the iframe option if you want a simpler frontend integration with less configurability over UX.

With this option, when a customer opens your developer portal, the following things will occur in quick succession (each step is outlined in more detail below):

Your server calls Kable with your secret key to generate a token, a short-lived access token that has temporary permissions to read usage data from Kable
Your server passes this short-lived token to your app's frontend, where you will render Kable dashboards in an iframe within your developer portal
Your customers can interact with Kable graphs and metrics within your developer portal just like you can in your own Kable account dashboard

Generate a token

Your usage data is protected in Kable. Only an authenticated user (with a valid password) or service (with a valid API key) can access data stored in Kable. However, it's not safe to expose your API keys to the browser on the frontend of your application.

A token is a short-lived access token that has temporary permissions to read usage data from Kable. Tokens have permission to read certain data, but are short-lived and safe to expose to the browser. To safely render Kable data in your developer portal UI, you'll use your API key to generate a token on the backend, and then use that token on the frontend.

When a customer visits the relevant page of your developer portal where you want to display Kable dashboards, the first thing you'll do is create a token. The create token API behaves just like other Kable API methods which accept your Kable client ID and client secret. You'll pass in the clientId of the customer whose data you'd like to render.

curl -X POST  \
  -H "Kable-Client-Id: kci_3c90e9ac92c64f31ae8ed84d21e18740" \
  -H "Kable-Client-Secret: sk_test.jI92Cbu0.XeHWdYM1VTLy4oLtGMw8wrmpt5q9d04n" \
  -d '{"clientId": "yourcompanyuser_1234567890"}' \
  https://test.kable.io/api/v1/tokens/create

You can find more details about creating tokens in the API Reference.

Render Kable Dashboards

Once you have a token, you can render Kable dashboards. Dashboards will be rendered in an iframe:

<iframe src="https://embed.kable.io/embed/dashboard?token=<TOKEN>"></iframe>

Note the url for embedded Kable dashboards: https://embed.kable.io/embed/dashboard. Kable will only return metrics if a valid token is provided as a query parameter.

A few notes about configuring the Kable iframe to look good in your developer portal:

Background color: You can set the background color for the dashboard rendered inside the iframe by passing a Hex color code as the background-color query parameter. This is a good way to help Kable blend into your developer portal UI. Be sure to URL-encode the Hex color code (# encodes to %23).
Iframe style: You might want to set border: none on the iframe to help blend Kable into your UI. It's also a good idea to define a large enough width and height for the Kable iframe so that graphs look good when rendered (ideally you want to avoid scrolling inside of your portal).

A fully configured Kable dashboard iframe might look like this:

<iframe 
  src="https://embed.kable.io/embed/dashboard?token=<TOKEN>&background-color=%232CAE76"
  style="border: none; min-width: 1000px; min-height: 800px;"
>

Your Customers

Your customers can now interact with their usage metrics just like you would within your Kable dashboard.

As Kable's dashboards improve over time, your embedded dashboards will automatically improve as well. Any settings you change in your own Kable account dashboard will be reflected for your embedded customer dashboards.