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

Question

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

我有一个默认加载 Intercom 的应用程序，但我想在特定页面中隐藏小部件。

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

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

那么，对于 SPA 有什么好的做法吗？

Answer 1

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

隐藏：

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

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

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

我在 angular 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
});

将此代码添加到您的守卫或导航器中 show/hide 根据您的默认设置在所有页面中添加此代码

// 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
});

然后show/hide它在特定页面

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
    });
}

如果需要查看所有 boot/update 属性，请使用此 link https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects

Answer 5

您可以根据当前页面 url 在您的对讲设置中 include/exclude 页面，这适用于我们的 SPA。说明位于问题中链接到的 article 中，位于“向 select 网站访问者显示 Messenger 启动器”下。

转到 Messenger 设置 > 控制您的入站对话音量
Select 'visitors who match certain data'
Select 'add data' 并添加属性 'current page URL' 以定义您 do/don 不想显示对讲启动器的页面

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

How to hide the Intercom chat widget in specific pages in a single page application (SPA)?

javascript

single-page-application

intercom