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.
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.
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
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:
- For usage data: listBillableMetrics and getPagedUsage
- For invoicing data: listInvoices and fetchInvoice