在 Zendesk 中嵌入 Metabase 仪表盘

Metabase 的一个很棒的功能是，你可以将仪表盘嵌入到你每天使用的应用程序中。

我们最近将我们的客户仪表盘直接嵌入到了 Zendesk 中。将此仪表盘与支持工单并排显示，使我们无需在 Metabase 和 Zendesk 之间切换即可查看客户信息。我们甚至传递了一些筛选参数，以自动按仪表盘中的客户和组织进行筛选，从而显着加快了我们解决问题的速度。

该仪表盘包括：

• 账户信息：客户名称、账户创建时间、是否已取消以及取消时间、订阅状态、套餐名称
• 支持层级信息：支持层级、他们的账户是否处于活动状态
• 部署和 Metabase 版本信息：部署类型、云提供商、Metabase 版本号以及上次更新时间
• 账户详细信息：年度价值、LTV、用户数量、国家/地区
• 云详细信息：客户有多少个问题和仪表盘，以及指向其实例日志的链接
• 联系信息：电子邮件、姓名、技术知识水平
• 客户满意度或情绪：调查回复、CSAT 回复等。
• 相关 GitHub 问题和工单列表

从技术上讲，您可以将 Metabase 仪表盘嵌入到任何允许 iframe 嵌入或允许支持使用嵌入 URL 的第三方应用程序的应用程序中。您可以测试此功能的其他一些平台包括 Salesforce、Jira、Stripe 和 Shopify。

以下是如何在 Zendesk 中嵌入客户仪表盘的快速演练。

我们的设置：嵌入在使用第三方应用程序的 iframe 中的交互式仪表盘

1. 在此示例中，我们使用了交互式嵌入。您可以使用公共嵌入来嵌入仪表盘，但在本例中，我们需要保护客户数据，因为公共嵌入启用了公共链接。如果您处于类似情况，最好坚持使用交互式嵌入。

2. 我们决定使用 iFrame 应用程序，而不是构建我们自己的应用程序。通过使用第三方应用程序，我们节省了工程资源，并更快地实现了工作实现。一个缺点：我们使用的应用程序 Customer360 的徽标始终可见。不太理想，但对于我们的内部使用来说，这不是什么问题。

我们考虑的 iframe 应用程序

为了开始使用，我们缩小了应用程序范围，并列出了它们的优点和缺点

• Iframe Plus：每个实例 7 美元，价格低廉，但缺点是没有支持。
• Zendesk Iframe：免费，但没有工单侧边栏选项，而这正是我们希望仪表盘存在的位置。例如，仪表盘将仅显示在组织视图中，而不是工单视图中。
• Customer360：每位代理 4 美元，价格低廉且 UI 易于使用。 这是我们选择的应用程序。

启用交互式嵌入

接下来，我们通过转到设置 > 管理员设置 > 嵌入启用了交互式嵌入。单击启用，然后单击交互式嵌入。

然后，我们从 Metabase 获取了仪表盘的 URL，并对其进行了正确格式化，以便在 Customer360 应用程序中使用。

您需要将 source 属性设置为您的站点 URL。例如，http://metabase.yourcompany.com/dashboard/1。

在 Metabase 中授权 Zendesk 和 Customer 360 URL

我们还需要在 Metabase 中授权以下 Zendesk URL。为此，我们导航到管理员设置 > 设置 > 嵌入 > 交互式 > 授权来源，并添加了以下 URL

Zendesk URL

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

Customer 360 URL

• https://*.myplaylist.io

安装 Customer 360 应用程序并添加您的仪表盘 URL

接下来，我们安装了 Customer 360 应用程序，并输入了我们的仪表盘 URL（并将 source 属性设置为我们的 Metabase 实例）。

通过在 URL 中将参数传递给仪表盘中的筛选器，仅显示您需要的客户数据

您可以通过参数化 URL 将值传递给仪表盘的筛选器。例如，我们同时传递了组织和工单请求者信息，因此现在我们的仪表盘会自动筛选，仅显示我们需要了解的关于客户及其组织的信息。

Customer 360 应用程序允许您使用以下参数

• {{ticket.requester.email}}
• {{ticket.requester.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>}}

有关示例，请参阅设置 SQL 变量文档。

关于 SSO 的一个小提示

如果您刷新 Zendesk 工单页面或添加新工单，Metabase 将要求您重新登录。此外，您需要在 Metabase 中保持活动会话，以免每次进入工单侧边栏时都被踢出。我们通过将我们环境的MB_SESSION_COOKIE_SAMESITE设置为none来解决此问题，如交互式嵌入设置文档和环境变量文档中所述。

整理 Zendesk 中的仪表盘视图

现在，当我们单击 Zendesk 中的工单并且工单侧边栏弹出时，我们的客户仪表盘就会出现，并筛选到客户及其组织！

我们通过在嵌入 URL 中将header设置为false，隐藏了一些 Metabase UI 组件，例如标题或面包屑导航。我们这样做是为了清理我们的仪表盘在应用程序中的外观。

显示或隐藏 Metabase UI 组件文档中列出了您可以执行的其他操作的示例。请注意，其中某些功能可能不适用于某些仪表盘，因为它取决于仪表盘中的组件。

查看其他嵌入项目

如果您需要灵感，请查看我们的Github 跟踪器中的项目和反馈。如果您将来手动进入存储库，只需按label:Embedding/Interactive筛选即可获取与嵌入相关的当前问题的完整列表（单击“已关闭”以查看已解决的问题。）