‧
阅读时间：5 分钟
在 Zendesk 中嵌入 Metabase 仪表盘
Ignacio Beines Furcada 和 Sarina Bloodgood
‧ 5 分钟阅读
分享本文
Metabase 的一个很棒的功能是，您可以将仪表板嵌入到您日常使用的应用程序中。
我们最近将我们的客户仪表板直接嵌入到了 Zendesk 中。将此仪表板与支持工单并排显示，使我们无需在 Metabase 和 Zendesk 之间切换即可查看客户信息。我们甚至传递了一些过滤器参数，以自动过滤仪表板中的客户和组织，大大加快了我们排除故障的速度。
仪表板包括
- 账户信息：客户名称、账户创建时间、是否已取消及取消时间、订阅状态、套餐名称
- 支持级别信息：支持级别、账户是否激活
- 部署和 Metabase 版本信息：部署类型、云提供商、Metabase 版本号和最后更新时间
- 账户详情：年价值、生命周期价值 (LTV)、用户数、国家/地区
- 云详情：客户拥有的问题和仪表板数量，以及指向其实例日志的链接
- 联系信息：电子邮件、姓名、技术知识水平
- 客户满意度或情绪：调查回复、CSAT 回复等。
- 相关的 GitHub 问题和工单列表
从技术上讲，您可以将 Metabase 仪表板嵌入到任何允许 iframe 嵌入或允许第三方应用程序使用嵌入 URL 的应用程序中。您可以尝试的其他平台包括 Salesforce、Jira、Stripe 和 Shopify。
以下是我们在 Zendesk 中嵌入客户仪表板的快速演练。
我们的设置：使用第三方应用程序通过 iframe 嵌入的交互式仪表板
-
在此示例中，我们使用了 交互式嵌入。您可以 使用公共嵌入 来嵌入仪表板，但在此实例中，我们需要保护客户数据，因为公共嵌入启用了公共链接。如果您处于类似情况，最好坚持使用交互式嵌入。
-
我们决定使用 iframe 应用程序，而不是构建自己的应用程序。通过选择第三方应用程序，我们节省了工程资源，并更快地实现了可用的实现。一个缺点是：我们选择的应用程序 Customer360 的徽标始终可见。不理想，但对于我们的内部使用来说问题不大。
我们考虑过的 iframe 应用程序
为了开始，我们缩小了应用程序的范围，并列出了它们的优缺点
- Iframe Plus：每个实例 7 美元，价格低廉，但缺点是没有任何支持。
- Zendesk Iframe：免费，但没有工单侧边栏选项，而这正是我们希望仪表板显示的位置。例如，仪表板仅在组织视图中显示，而在工单视图中不显示。
- Customer360：每位代理 4 美元，价格低廉且 UI 易于使用。这是我们选择的应用程序。
启用交互式嵌入
接下来，我们通过转到 **设置 > 管理设置 > 嵌入** 来启用 交互式嵌入。点击 **启用**，然后点击 **交互式嵌入**。
然后，我们从 Metabase 中获取了仪表板的 URL，并对其进行了适当格式化，以便在 Customer360 应用程序中使用。
您需要将 source 属性设置为 您的站点 URL。例如：https://metabase.yourcompany.com/dashboard/1。
在 Metabase 中授权 Zendesk 和 Customer 360 URL
我们还需要授权以下 Zendesk URL 在 Metabase 中。为此，我们导航到 **管理设置 > 设置 > 嵌入 > 交互式 > 已授权来源** 并添加了以下 URL
Zendesk URL
https://*.zdusercontent.comhttps://*.zndsk.comhttps://*.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 进行过滤，即可获得当前所有与嵌入相关的问题的完整列表（点击已关闭以查看已解决的问题）。
