如何攒一个Crisp Chat在线客服插件

1.简介

Crisp Chat是一个部署方便、功能强大的在线客服平台。主要是面向Business用户的，不过也为个人网站、博客等提供了一些免费方案。本站部署这个在线聊天系统主要是为了方便网友联系到我，毕竟不是每个人都有Telegram。

2.功能&特性

• 实时聊天
• 支持在电脑网页及手机、平板等客户端APP进行回复
• 查看访客IP、地理位置等信息（实时）
• 离线时消息自动转发至预设邮箱
• 离线时访客可以玩Crisp提供的网页游戏
• 支持设置聊天机器人
• 可关联文档库
• 发送营销邮件
• 客户关系管理(CRM)
• 实时翻译功能
• MagicType（实时查看客户的输入内容）
• 屏幕共享（无需其他插件）
• 集成多种插件（Telegram, Slack，Wordpress，Shopify，Zapier，Hubspot，Salesforce等）
• 过滤用户
• 其他功能

免费版方案支持访客和站长互相发送文字聊天，支持访客上传图片（每天限制一定的数量），但是站长发送图片等文档需要付费。
一般来说，文字聊天基本足够，如果需要发送图片交流，可以选择上传到免费图床，然后互发图片链接。
推荐的免费图床：https://sm.ms/

3.如何部署

3.1.注册Crisp Chat账号。

注册地址：https://app.crisp.chat/initiate/signup/
注册较为简单，就不演示了。

3.2.设置语言及添加网站。

登录之后，网站默认展示英文界面。建议首先更改语言为中文，更方便些。点击左下角的设置（Settings）按钮，然后点击
账户设置（Account），找到语言（Language），设置为Chinese。

3.3.进行网站设置。

点击网站设置（Website Settings），点击“添加一个新的网站”（Add a new website），开始添加你的网站。

输入网站名称和域名之后，点击显示整合。

此时网页会展示你可能用到的一些代码。根据自己的需求进行选择。此处以本站为例，我选择HTML代码。


点击HTML代码，然后根据网页提示复制自己的代码。右侧有官方演示视频。
Crisp官方提示“将Crisp代码粘贴至你的页面。你可以将其添加到HTML HEAD区域。”看来Crisp希望我们把这段代码添加到HEAD头部。其实本站使用的Handsome主题就有相关设置，较为方便。
打开Typecho控制台，进入外观设置-Handsome外观设置。
在开发者设置中找到自定义输出head 头部的HTML代码，粘贴进去，保存设置。

大功告成，效果如下图。

4.手机APP

Crisp的手机APP还是比较好用的，以iOS为例：
为保护访客的隐私，部分信息已打码。