‧
阅读 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 美元，价格低廉且用户界面易于使用。这就是我们选择的应用程序。
启用交互式嵌入
接下来，我们通过导航到 设置 > 管理员设置 > 嵌入来启用交互式嵌入。点击启用，然后点击交互式嵌入。
然后，我们从 Metabase 中获取了仪表板的 URL，并对其进行了适当的格式化，以便在 Customer360 应用程序中使用。
您需要将源属性设置为您的站点 URL。例如，http://metabase.yourcompany.com/dashboard/1。
在 Metabase 中授权 Zendesk 和 Customer 360 URL
我们还需要在 Metabase 中授权以下 Zendesk URL。为此，我们导航到管理员设置 > 设置 > 嵌入 > 交互式 > 授权来源并添加了以下 URL
Zendesk URL
https://*.zdusercontent.comhttps://*.zndsk.comhttps://*.zendesk.com
Customer 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 进行筛选，即可获取当前所有嵌入相关问题的完整列表（点击“已关闭”可查看已解决的问题）。
