前言
对于前端开发人员来说,常常需要为页面添加互动性,而客服功能是其中必不可少的一种。本篇文章将给大家介绍一种 npm 包:live-help-now,它可以方便地在网站上添加客服聊天功能。在本文中,我们将探讨 live-help-now 的使用方法。
安装
要在项目中使用 live-help-now 包,首先需要进行安装。在命令行中输入以下命令即可完成安装:
npm install live-help-now
配置
配置是使用 live-help-now 过程中的必备步骤,我们需要使用配置信息来初始化客服聊天功能。在项目文件中,我们可以新建一个 .json 文件,例如 live-help-now-config.json,用它来储存 live-help-now 的配置信息。
配置文件的格式如下所示:
{ "apiKey": "yourLiveHelpNowApiKey", "groupName": "yourLiveHelpNowGroupName", "departmentName": "yourLiveHelpNowDepartmentName", "language": "yourLiveHelpNowLanguage" }
- apiKey 是你的 LiveHelpNow API Key,这是你在 livehelpnow.net 注册时收到的 API Key;
- groupName 是你的 LiveHelpNow 组织名称,这是你在后台设置的组织名称;
- departmentName 是你的 LiveHelpNow 部门名称,这是你在后台设置的部门名称;
- language 是聊天窗口的显示语言,目前支持英语和中文。
在代码中,我们需要引用这个 .json 配置文件并解析它,如下所示:
const liveHelpNowConfig = require('./live-help-now-config.json'); const apiKey = liveHelpNowConfig.apiKey; const groupName = liveHelpNowConfig.groupName; const departmentName = liveHelpNowConfig.departmentName; const language = liveHelpNowConfig.language;
初始化
在配置完成后,我们需要使用以上四个变量初始化 live-help-now,以便开始使用客服聊天功能。
import LiveHelpNow from 'live-help-now'; const liveHelpNow = LiveHelpNow.init(apiKey, groupName, departmentName, language);
在此之后,我们就可以使用 live-help-now 提供的 API 来实现客服聊天。
使用
在 live-help-now 包中提供了一些 API,我们可以使用这些 API 来实现客服聊天。
触发聊天
我们可以使用以下代码来触发聊天窗口的打开:
liveHelpNow.chat();
设定热键
为了更加方便地调用上述 chat() 方法,我们可以将聊天窗口打开的热键设定为 F1,如下所示:
liveHelpNow.hotkey('F1', () => { liveHelpNow.chat(); });
Dynamically Change Language
我们可以使用以下代码来动态调整聊天窗口的显示语言:
liveHelpNow.changeLanguage(language);
示例代码
以下是一个使用 live-help-now 实现客服聊天的样例代码:
-- -------------------- ---- ------- ------ ------------ ------- ---------------- ------- ------------------------ ------------ ------- ------------------------------------------- ------- ---------------------------------- -------- ----- ----------- - ------------------------ ---------- --------------- ---------- ---------------------------------------------------------------- -- -- - ------------------- --- --------- -------
结论
使用 live-help-now 包可以方便地在网站中添加客服聊天功能。在理解了本文介绍的 live-help-now 包的配置、初始化以及使用方法之后,我们应该可以顺利地在自己的项目中使用它。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056bda81e8991b448e5833