Embedded Dashboards

Displaying usage metrics to your customers

Embedded Dashboards allow you to display usage metrics to your customers from within your own developer portal. In the same way you derive value from your Kable dashboard, your customers can leverage their own usage metrics through embedded dashboards to make better use of your API.

You have two choices when it comes to displaying Kable usage metrics to your customers within your developer portal:

Build Your Own Dashboard UX

You should choose this option if you want greater control over the look and feel of your dashboard UX.

With this option, you'll query metrics from Kable using the metrics API, and then display these metrics within charts or graphs rendered by your own choice of frontend library.

Kable Metrics API

See the metrics API within the API Reference for details about how to pull metrics from Kable:

  • For individual metrics (like count of transactions or count of distinct userIds) you can use the metrics API to pull numerical values from Kable
  • For time-series or comparison metrics (like requests by month, webhooks per day, or usage by customer) you can use the metrics API to pull graph data from Kable.

📘

Time-series and comparison metrics are coming soon and not yet available in the metrics API.

Display Metrics

You can use data from the metrics API for display in your library of choice. (Chart.js, CanvasJS, and Dygraphs are just three of many available third party choices, or you can build your own frontend library.*)

The metrics API returns time-series and comparison data in the same format that most of these libraries accept, so it's pretty easy to integrate Kable data within your library of choice.

📘

Kable does not have any affiliation with any third party charting library, and therefore makes no representation about the reliability or resilience of these options. Any libraries you choose to use in your products should be tested by your development team.

Embed Kable Dashboards via iframe

You should choose this option if you want a simpler frontend integration or want to leverage time series graphs (currently unavailable via metrics API above).

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

That's it! 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.


Did this page help you?