Skip to main content

Customer dashboards

Metronome's embeddable dashboards are a low effort way to share Metronome invoices and usage data with your customers. All invoices (draft and finalized) and usage data up to 90 days old come out of the box.

Invoice dashboard

The invoice dashboard allows your customers to view their current invoice and historical invoices.

a screenshot of the a sample customer's invoice dashboard

Invoice dashboard options

The invoice dashboard supports showing / hiding zero usage invoice line items. To control this, send the optional dashboard_options array with a key show_zero_usage_line_items and value of true or false. The default is false.

Usage dashboard

The usage dashboard shows usage metrics for the past 30, 60, or 90 days. The usage metrics shown are those attached to a customer's current plan. Usage graphs will be aggregated for plans that contain grouped products.

a screenshot of the a sample customer's usage dashboard

Embedding a dashboard

Use the Metronome API to retrieve an embeddable dashboard url which can be displayed using an iframe within your internal billing UI.

If you don’t have one yet, you’ll need to create an API token. Once it’s created, use the /dashboards/getEmbeddableUrl endpoint and pass the customer_id and which dashboard you want to display to the customer. You can also override the color palette to match your design by passing in a color_overrides array to the api call. The next section will walk through overriding the color palette in detail.

Overriding the color palette

The /dashboards/getEmbeddableUrl API supports a color_overrides array which can be used to add your brand colors to the dashboard. You may reference the design system outline and style guides below.

Dashboard design system

a screenshot of the embeddable dashboard style guide

For a full list of colors which can be customized see the /dashboards/getEmbeddableUrl endpoint documentation.

Creating dashboards via API

You can also create custom dashboards by pulling directly from the Metronome API - these dashboards are powered by the following endpoints: