Menu

Embedding Dashboards

The following feature is available as public beta in Flex UI version 1.28 and later. To use this feature, please make sure Insights - Programmable Dashboards public beta feature is enabled in your admin interface.

A developer proxy is needed for local development. Please refer to the article about Local Development.

Starting in verison 1.27, Flex supports Dashboard embedding. To utilize this functionality, use the Dashboard component exported under the Flex.Insights.Dashboard namespace.

The component takes a dashboardId prop and displays that dashboard embedded in an iframe. This allows you to create custom views with particular dashboards.

Dashboard component

The component has following props:

  • dashboardId: string;
  • queryParams?: {};
  • events?: { [event: string]: (eventData: unknown, eventId: string) => void };

dashboardId

The ID of the dashboard. This is the only required prop on this component and most likely the only one you will need to use.

Please refer to the next chapter to learn how to get dashboardId.

queryParams

For expert users. The object will be passed as query string to the iframe URL.

events

For expert users. Allows you to attach custom handlers to the post message events received from the iframe.

Getting the Dashboard ID

Knowing the Dashboard ID is crucial for being able to render it. To figure out the correct Dashboard ID, navigate to the desired dashboard first and check the URL in your browser.

It should look something like this: <yourFlexUrl>/dashboards/aeJSfSg9if1x.

The part after dashboards/ is the currently displayed Dashboard's ID, in this case aeJSfSg9if1x.

Example

We will use the Dashboard ID we just discovered to display the Dashboard as content of the CRM container:

Flex.CRMContainer.Content.replace(
  <Flex.Insights.Dashboard key="some-key" dashboardId="aeJSfSg9if1x" />
);
Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

Thank you for your feedback!

Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!

thanks-feedback-gif