在现代 Web 应用程序中，与用户互动是至关重要的。这包括聊天功能、通知等等。Intercom 是一种流行的解决方案，可以使应用程序与用户之间建立实时、个性化的联系。如果您正在使用 AngularJS 构建应用程序，您可以使用 ng-intercom-multi 包来轻松地与 Intercom 集成。
1. 安装和配置 ng-intercom-multi
要使用 ng-intercom-multi，请在终端中使用 npm 安装该包：
npm install ng-intercom-multi
安装完成后，将其导入您的应用程序。在您的应用程序 JavaScript 文件中，添加以下代码：
-- -------------------- ---- -------
------ - --------------------- - ---- --------------------
-----------
-------- -
-- ---
-------------------------------
------ ---------------
-- --- -------- ------------- -------
---
--
--在导入模块时，传递您的 Intercom 应用程序 ID。这将允许您与 Intercom 交互。接下来，您可以在任何组件中使用 ng-intercom-multi。
2. 在组件中使用 ng-intercom-multi
在组件中使用 ng-intercom-multi，您需要注入 IntercomService。在组件类中，您可以添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- --------------------
------------
--------- ------------------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- -
------------------- --------- ---------------- --
---------- -
--------------------
-- --- -------- ------------- -------
---
-
-在构造函数中，使用依赖注入引入 IntercomService。在 ngOnInit() 生命钩子中，使用 boot() 方法初始化 Intercom 并传递您的配置选项。
3. 与 Intercom 交互
ng-intercom-multi 提供了以下方法，可以让您与 Intercom 进行交互。
boot(config?: IIntercomBootConfig): 初始化 Intercom。shutdown(): 关闭 Intercom。show(): 显示 Intercom 窗口。如果 Intercom 处于关闭状态，将启动 Intercom 并打开窗口。hide(): 隐藏 Intercom 窗口。update(data: IIntercomData): 更新 Intercom 中用户的数据。trackEvent(eventName: string, metadata?: IIntercomMetadata): 跟踪事件数据。
在组件中，您可以使用以上任何方法调用 IntercomService 中的相关函数。例如，在模板中，您可以添加以下代码：
<button (click)="intercom.show()">Show Intercom</button>
当用户单击 Show Intercom 按钮时，Intercom 窗口将打开。
4. 使用指南
在使用 ng-intercom-multi 时，请确保您理解与 Intercom API 的基本交互。例如，在使用 trackEvent() 方法时，您需要了解 Intercom 自定义事件的基本结构，并将元数据传递给相应的方法。
另外，请注意维护 Intercom 的状态。如果用户关闭了 Intercom 窗口，您需要将其重新打开，以便与用户进行交互。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- ------------------- - ---- --------------------
------------
--------- ------------------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- -
------------------- --------- ---------------- --
---------- -
--------------------
------- ----------------
----- ----- -----
------ ----------------------
----------- -----------
-- --- -------- ------------- -------
---
-
-------------- -
---------------------
-
-------------- -
---------------------
-
------------ -
----------------------
----- ----- -----
------ ----------------------
-- --- -------- ---- ---- ------
---
-
------------ -
---------------------------------------- -
----------- ----------
----------- ----------
-- --- -------- -------- ------
---
-
-<button (click)="showIntercom()">Show Intercom</button> <button (click)="hideIntercom()">Hide Intercom</button> <button (click)="updateUser()">Update User</button> <button (click)="trackEvent()">Track Event</button>
这里是一个基本的示例组件，展示了如何使用 ng-intercom-multi 与 Intercom API 进行交互。您可以调用上述函数，与用户进行实时交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddbf1