MENU

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

• August 19, 2020 • 教程·知识共享

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。
账户设置.png
语言设置.png

3.3.进行网站设置。

点击网站设置(Website Settings),点击“添加一个新的网站”(Add a new website),开始添加你的网站。
网站设置.png
添加网站.png
添加网站2.png

输入网站名称和域名之后,点击显示整合
显示整合.png
此时网页会展示你可能用到的一些代码。根据自己的需求进行选择。此处以本站为例,我选择HTML代码。
复制crisp代码.png
复制HTML代码.PNG
点击HTML代码,然后根据网页提示复制自己的代码。右侧有官方演示视频。
Crisp官方提示“将Crisp代码粘贴至你的页面。你可以将其添加到HTML HEAD区域。”看来Crisp希望我们把这段代码添加到HEAD头部。其实本站使用的Handsome主题就有相关设置,较为方便。
打开Typecho控制台,进入外观设置-Handsome外观设置。
开发者设置中找到自定义输出head 头部的HTML代码,粘贴进去,保存设置。
部署HTML代码.PNG
大功告成,效果如下图。
效果.png

4.手机APP

Crisp的手机APP还是比较好用的,以iOS为例:
为保护访客的隐私,部分信息已打码。
iOS-1.PNG
iOS-2.PNG
iOS-3.PNG

Last Modified: October 28, 2020
Archives Tip
QR Code for this page
Tipping QR Code
Leave a Comment

7 Comments
  1. jiefei jiefei

    up,请问您的这个博客框架是什么?我也想搭一个和您这样的一个博客。(๑•̀ㅁ•́ฅ)

    1. @jiefei我用的是Typecho:https://typecho.org/

    2. jiefei jiefei

      @Sabrina嗯嗯,谢谢up,这个是php的,有没有类似是java写的

    3. @jiefei好像见得比较多的就是Halo了

  2. 您好,请问您用的是ultimate吗

    1. @van_fantasy你好,是的。蹭的别人的Unlimited。

  3. You mentioned that terrifically!