在Zendesk中嵌入Metabase仪表盘

关于 Metabase 的一个有趣之处是您可以将仪表板嵌入到您每天使用的应用程序中。

我们最近将客户仪表板直接嵌入到 Zendesk 中。将此仪表板与支持票证并排显示，使我们能够查看客户信息，而无需在 Metabase 和 Zendesk 之间切换。我们甚至传递了一些过滤器参数，以便在仪表板中自动过滤客户和组织，显著加快了问题排查的速度。

仪表板包括

• 账户信息：客户名称、账户创建时间、是否取消以及取消时间、订阅状态、计划名称
• 支持层级信息：支持层级、账户是否活跃
• 部署和 Metabase 版本信息：部署类型、云服务提供商、Metabase 版本号和最后更新时间
• 账户详情：年度价值、客户终身价值、用户数量、国家
• 云详情：客户有多少个问题和仪表板，以及链接到他们的实例日志
• 联系信息：电子邮件、姓名、技术知识水平
• 客户满意度或情感：调查响应、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应用程序中使用。

您需要将源属性设置为您的站点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（源属性设置为我们的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 过滤，即可获取所有当前嵌入相关问题的完整列表（点击“已关闭”查看已解决的问题。）