如何在单页应用程序 (SPA) 的特定页面中隐藏对讲聊天小部件？

Question

考虑用 vanilla JS 编写的单页应用程序（以避免特定于框架的答案）。

我有一个应用程序，默认情况下会在其中加载对讲机，但我想在特定页面中隐藏小部件。

这应该可以从 Intercom 本身实现，如他们帮助中心的this article 所示，但它在单页应用程序中实际上不起作用 - 无论在 Intercom 中配置什么，都会显示小部件。

一种选择是在页面上找到小部件并为给定页面手动隐藏它，但这感觉、听起来和味道都像 hack（它需要在返回到应该有小部件的页面时重新启用小部件出现）。

那么，对于如何为 SPA 做这件事，有什么好的做法吗？

Answer 1

如果您想以编程方式隐藏对讲机启动器，可以使用update 命令来实现。

隐藏：

Intercom('update', {
  "hide_default_launcher": true
});

并再次显示它（当您的下一页加载或触发应该显示它的事件时）。

Intercom('update', {
  "hide_default_launcher": false
});

我在有角度的 SPA 中使用了这种精确的技术，将其隐藏在屏幕上，它会遮挡一些按钮。

Answer 2

Intercom('update', {
     "hide_default_launcher": true
});
$(".helpSupport").once().on("click", function() {
     Intercom('update', {
        "hide_default_launcher": false
     });
      Intercom('showMessages');
});

Answer 3

当我调用我的组件时，我调用了这段代码。

window.Intercom('update', {
    hide_default_launcher: false,
  });

示例：

const MyComponent = () => {
     window.Intercom('update', {
        hide_default_launcher: false,
      });

  return (
<div>...</div>);
};

缺点是您必须将 hide_default_launcher 设置为 true，当您希望小部件下次出现时.

Answer 4

在您加载用户数据时输入此代码，并将您的小部件可见性设置为默认值

// Intercom logged in user variables loader
(<any>window).Intercom("boot", {
    app_id: "abc",
    name: user.username,
    email: user.email,
    created_at: moment(user.addedDate).unix()
  });

// Hide messenger widget after loading user variables
// Will show it manually in specific pages
if ((<any>window).Intercom) (<any>window).Intercom("update", {
     "hide_default_launcher": true
});

将此代码添加到您的警卫或导航器中，以根据您的默认设置在所有页面中显示/隐藏它

// Hide messenger widget for all pages by default
// Will show it manually in specific pages
if ((<any>window).Intercom) (<any>window).Intercom("update", {
     "hide_default_launcher": true
});

然后在特定页面中显示/隐藏它

ngOnInit()
{
    // Show messenger widget for current page
    // This code will override the default one in auth-guard/navigator
    if ((<any>window).Intercom) (<any>window).Intercom("update", {
     "hide_default_launcher": false
    });
}

如果需要查看所有启动/更新属性，请使用此链接 https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects

Answer 5

您可以根据当前页面网址在对讲机设置中包含/排除页面，这适用于我们的 SPA。说明位于您在问题中链接到的article 中，位于“显示 Messenger 启动器以选择网站访问者”下。

• 转到 Messenger 设置 > 控制您的入站对话音量
• 选择“符合特定数据的访客”
• 选择“添加数据”并添加属性“当前页面 URL”以定义您希望/不希望显示对讲机启动器的页面