跳转至正文

Intercom Capacitor 插件

在您的 Capacitor 应用中集成 Intercom 实时聊天、帮助中心及支持工作流

安装

bun add @capgo/capacitor-intercom bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-intercom
  • pnpm add @capgo/capacitor-intercom
  • yarn add @capgo/capacitor-intercom

指南

如何在 Capacitor 中使用 Intercom

在设备上测试

下载 Capgo App,然后扫描二维码 code。

Intercom 插件预览 QR code

使用 @capgo/capacitor-intercom

Intercom Capacitor 插件。

安装

bun add @capgo/capacitor-intercom
bunx cap sync

bunx cap sync 将插件的原生 code 复制到你的原生项目中。每次升级插件后都要重新运行。

导入

import { CapgoIntercom } from '@capgo/capacitor-intercom';

API 概览

方法 描述
loadWithKeys 在运行时使用 API 密钥初始化 Intercom。如果你不想在 capacitor.config 中配置密钥,请使用此方法。
registerIdentifiedUser 在 Intercom 中注册已知用户。必须提供 userId 或 email 中的至少一项。
registerUnidentifiedUser 在 Intercom 中注册匿名用户。
updateUser 更新 Intercom 中的用户属性。
logout 退出 Intercom 登录。
logEvent 在 Intercom 中记录自定义事件。
displayMessenger 打开 Intercom 聊天窗口。
displayMessageComposer 打开消息编辑器并预填内容。
displayHelpCenter 打开 Intercom 帮助中心。
hideMessenger 隐藏 Intercom 聊天窗口。
displayLauncher 显示 Intercom 启动按钮。
hideLauncher 隐藏 Intercom 启动按钮。
displayInAppMessages 启用 Intercom 应用内消息。
hideInAppMessages 禁用 Intercom 应用内消息。
displayCarousel 展示特定的 Intercom 轮播图。
displayArticle 展示特定的 Intercom 文章。
displaySurvey 展示特定的 Intercom 调查问卷。
setUserHash 设置用于身份验证的 HMAC。
setUserJwt 设置用于安全消息认证的 JWT。
setBottomPadding 设置 Intercom 聊天窗口底部的内边距。
sendPushTokenToIntercom 向 Intercom 发送推送通知 token。
receivePush 处理收到的 Intercom 推送通知。
getUnreadConversationCount 获取当前用户的未读会话数。

示例

loadWithKeys()

在运行时使用 API 密钥初始化 Intercom。如果你不想在 capacitor.config 中配置密钥,可以用这种方式。

import { CapgoIntercom } from '@capgo/capacitor-intercom';

await CapgoIntercom.loadWithKeys({
  appId: 'app-id-123',
  apiKeyIOS: 'api-key-ios',
  apiKeyAndroid: 'api-key-android',
});

registerIdentifiedUser()

在 Intercom 中注册已知用户。至少需要提供 userId 或 email 之一。

import { CapgoIntercom } from '@capgo/capacitor-intercom';

await CapgoIntercom.registerIdentifiedUser({
  userId: 'user-id-123',
  email: 'user@example.com',
});

registerUnidentifiedUser()

在 Intercom 中注册匿名用户。

import { CapgoIntercom } from '@capgo/capacitor-intercom';

await CapgoIntercom.registerUnidentifiedUser();

updateUser()

更新 Intercom 中的用户属性。

import { CapgoIntercom } from '@capgo/capacitor-intercom';

await CapgoIntercom.updateUser({ userId: 'user-id-123' });

logout()

让用户退出 Intercom 登录。

import { CapgoIntercom } from '@capgo/capacitor-intercom';

await CapgoIntercom.logout();

logEvent()

在 Intercom 中记录自定义事件。

import { CapgoIntercom } from '@capgo/capacitor-intercom';

await CapgoIntercom.logEvent({ name: 'example' });

上表列出了 23 个核心方法。监听器与版本辅助函数,以及每个方法的完整契约,均记录在 GitHub 仓库.

监听事件

addListener 会返回一个句柄。调用 handle.remove() 在屏幕卸载时,或者调用 CapgoIntercom.removeAllListeners() 以清除所有监听器。

完整参考文档

继续使用 @capgo/capacitor-intercom

如果你正在使用 使用 @capgo/capacitor-intercom 要规划原生插件工作,请将其与 @capgo/capacitor-intercom 有关 @capgo/capacitor-intercom 的实现细节, 快速入门 有关“入门指南”中的实现细节, Capgo 插件目录 查看 Capgo 插件目录中的产品工作流, Capgo 提供的 Capacitor 插件 有关 Capgo 开发的 Capacitor 插件的实现细节,以及 添加或更新插件 有关添加或更新插件的实现细节。

常见问题

Intercom 插件常见问题

如何在 Capacitor 应用中安装 Intercom 插件?

运行 "bun add @capgo/capacitor-intercom"(或 "npm install @capgo/capacitor-intercom"),然后运行 "bunx cap sync",让 iOS 和 Android 项目引入原生 code。再在应用 code 中从 "@capgo/capacitor-intercom" 导入即可。

@capgo/capacitor-intercom 支持 React、Vue 和 Angular 吗?

支持。Intercom 是一个 Capacitor 包,因此任何运行在 Capacitor 里的 Web 框架都能用,包括 Ionic、React、Vue、Angular、Svelte 和纯 JavaScript。

@capgo/capacitor-intercom 支持哪个 Capacitor 版本?

Capgo 插件遵循 Capacitor 的主版本号:请使用与 Capacitor 主版本号一致的插件主版本(例如插件 v8 对应 Capacitor 8)。GitHub README 中的兼容性表列出了仍在维护的版本。

@capgo/capacitor-intercom 是免费开源的吗?

是的。code 的源码已在 GitHub 公开,地址为 https://github.com/Cap-go/capacitor-intercom/,该包也可从 npm 免费安装。欢迎提交 Bug 报告和 Pull Request。

使用 Intercom 的 code 可以不经过 App Store 审核就更新吗?

安装或升级插件会改动原生 code,因此需要重新做一次商店构建。之后,调用该插件的 JavaScript、HTML 和 CSS 改动就能通过 Capgo live updates 立即发布。

无需等待 App 审核,即可快速发布 Intercom 更新

只要插件已包含在你的商店版本中,Capgo live updates 就能在几分钟内把 JavaScript、HTML 和 CSS 的改动推送给用户。

开始使用 Capgo