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

Posted 2023-02-16

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

【英文标题】：How to hide the Intercom chat widget in specific pages in a single page application (SPA)?

【发布时间】：2019-12-14 18:08:51

【问题描述】：

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

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

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

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

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

【问题讨论】：

您可以在进入给定页面时有条件地将CSS类添加到BODY，并在退出给定页面时删除该类。然后您可以使用 CSS 选择器定位 Intercom 小部件并将其设为 display: none

@IVOGELOV 这就是我所说的感觉像是黑客的东西。使用 CSS 选择器而不是 js 并不能让它变得更好。

【参考方案1】：

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

隐藏：

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

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

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

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

【讨论】：

提示：在尝试访问窗口对象（"Intercom" in window）之前，值得检查窗口对象上是否存在Intercom，因为某些用户的浏览器扩展程序会阻止对讲脚本被下载。执行此检查将在运行时为您节省一个错误。

完整的脚本是什么？

@OldGreg if (window.Intercom) window.Intercom('upda... 或 if (typeof window.Intercom !== 'undefined') ...

【参考方案2】：

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

【参考方案3】：

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

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

示例：

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

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

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

【参考方案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

【参考方案5】：

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

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review