1、注册DaoVoice

我直接使用了GitHub注册

邀请码:201adca1

公司随便写就行，规模1-5人。

2、app_id

注册成功后，进入后台控制台，“应用设置”-“安装到网站”，标题2下面右app_id，记下来。

3、配置next

以 next 主题为例（其他应该一样，不过我没试过），打开 themes/next/layout/_partials/head.swig 文件中添加如下代码，位置随意（我添加到了最后面）：


{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

在主题配置文件 _config.yml(themes/next/_config.yml)，添加如下代码：

# Online contact 
daovoice: true
daovoice_app_id: 这里输入前面获取的app_id

4、设置聊天框有样式

进入DaoVoice后台管理页面。

“应用设置”-“聊天设置”-“定制聊天窗口样式”一栏中设置：

自定义颜色 #3890ff

位置：右下

距离右侧像素值 30.0

距离下侧像素值 65.0

点击保存

这是我调整好的比较美观的位置。

tips：下方有“在邮件和聊天窗口下方显示“一分钟了解 DaoVoice”的字样”自己可以把勾去掉，

不过本着分享的原则，我一般都把使用的技术链接放在页面上让更多的人了解。

5、完成

hexo d -g

即可看到效果