Embed a Metabase dashboard in Zendesk

One cool thing about Metabase is that you can embed a dashboard in the apps you use every day.

We recently embedded our customer dashboard right into Zendesk. Having this dashboard side-by-side with support tickets allows us to see customer information without having to switch between Metabase and Zendesk. We even passed a few filter parameters to automatically filter on the customer and organization in the dashboard, significantly speeding up how quickly we can troubleshoot issues.

The dashboard includes:

• Account information: Customer name, when their account was created, if it was cancelled and when, subscription status, plan name
• Support tier information: Support tier, whether their account is active
• Deployment and Metabase version information: Deployment type, cloud provider, Metabase version number and last time they updated
• Account details: Annual value, LTV, number of users, country
• Cloud details: How many questions and dashboards the customer has, and link to their instance log
• Contact information: Email, name, level of technical knowledge
• Customer happiness or sentiment: Survey responses, CSAT responses, etc.
• List of associated GitHub issues and tickets

Technically, you can embed a Metabase dashboard into any app that allows iframe embedding or allows third-party apps that support the use of embedding URLs. A few other platforms that you can test this out with are Salesforce, Jira, Stripe, and Shopify.

Here’s a quick walkthrough of how we embedded our customer dashboard in Zendesk.

Our setup: an interactive dashboard embedded in an iframe using a third-party app

1. We used interactive embedding in this example. You can use public embedding to embed a dashboard, but for this instance, we needed to protect customer data as public embedding enables public links. It’s best to stick with interactive embedding if you’re in a similar position.

2. We decided to use an iFrame app rather than build our own app. By going with a third-party app, we saved engineering resources and got to a working implementation faster. One downside: the logo for the app we went with, Customer360, is always visible. Not ideal, but not really an issue for our internal-facing use.

The iframe apps we considered

To get started, we narrowed down apps and made a list of their pros and cons:

• Iframe Plus: $7 per instance, so it’s low price, but the con is there isn’t any support.
• Zendesk Iframe: Free, but there was no ticket sidebar option, which is where we wanted the dashboard to live. E.g., the dashboard will only show up in organization view, not ticket view.
• Customer360: $4 per agent, so it’s low price and the UI is easy-to-use. This is the app we went with.

Enable interactive embedding

Next, we enabled interactive embedding by going to Settings > Admin settings > Embedding. Click on Enable, and click on Interactive embedding.

We then grabbed the URL for our dashboard from Metabase and properly formatted it to use in the Customer360 app.

You’ll need to set the source attribute to your site URL. For example, http://metabase.yourcompany.com/dashboard/1.

Authorize Zendesk and Customer 360 URLs in Metabase

We also needed to authorize the following Zendesk URLs in Metabase. To do this, we navigated to Admin Settings > Settings > Embedding > Interactive > Authorized Origins and added the following URLs:

Zendesk URLs

• https://*.zdusercontent.com
• https://*.zndsk.com
• https://*.zendesk.com

Customer 360 URL

• https://*.myplaylist.io

Install the Customer 360 app and add your dashboard URL

Next, we installed the Customer 360 app and input our dashboard URL (with the source attribute set to our Metabase instance).

Show only the customer data you need by passing parameters in the URL to filters in your dashboard

You can pass values to your dashboard’s filters via parameterized URLs. For example, we pass both Organization and Ticket requester information, so now our dashboard automatically filters to show only the information we need about the customer and their organization.

The Customer 360 app lets you use the following parameters:

• {{ticket.requester.email}}
• {{ticket.requester.emails}} (comma-separated list of requester’s emails)
• {{ticket.requester.external_id}}
• {{ticket.requester.id}}
• {{ticket.requester.custom_fields.<field_key>}}
• {{ticket.organization.id}}
• {{ticket.organization.external_id}}
• {{ticket.organization.custom_fields.<field_key>}}
• {{ticket.ticket_field_<field ID number>}}

See the setting a SQL variable docs for an example.

A small caveat about SSO

Metabase will ask you to sign in again if you refresh the Zendesk ticket page or add a new ticket. Also, you will need an active session in your Metabase to not be kicked out every time you enter the ticket sidebar. We got around this by setting our environment’s MB_SESSION_COOKIE_SAMESITE to none, as mentioned in the interactive embedding setup docs and environment variables docs.

Tidy up your dashboard view in Zendesk

Now, when we click on a ticket in Zendesk and the ticket sidebar pops up, our customer dashboard appears and is filtered down to the customer and their organization!

We hid a few Metabase UI components, like headers or breadcrumbs, by setting header to false in the embedding URL. We did this to clean up the way our dashboard looks in-app.

There’s a list of examples of what else you can do in the showing or hiding Metabase UI components docs. Note that some of these feature may not work for certain dashboards as it depends on the components in the dashboard.

Check out other embedding projects

If you need inspiration, check out projects and feedback in our Github tracker. If you enter the repo manually in the future, just filter by label:Embedding/Interactive to get a full list of current embedding-related issues (click on closed to see resolved issues.)