在 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 美元，价格低廉且用户界面易于使用。这就是我们选择的应用程序。

启用交互式嵌入

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

然后我们从 Metabase 获取了仪表板的 URL，并对其进行了适当格式化，以便在 Customer360 应用中使用。

您需要将源属性设置为您的站点 URL。例如，https://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

客户 360 URL

• https://*.myplaylist.io

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

接下来，我们安装了 Customer 360 应用程序，并输入了我们的仪表板 URL（其中源属性设置为我们的 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 筛选即可获取当前所有与嵌入相关的问题列表（点击“已关闭”可查看已解决的问题）。

更多嵌入式分析资源

• 什么是嵌入式分析
• 提供面向客户的分析的策略
• 嵌入悲伤的五个阶段
• 一个 Metabase 之谜