基于Chatra-的聊天Widget

其他 Widget,Js

发布时间 : 2019-10-18 09:59

字数:365 阅读 :

先上图看一下效果
Html 中引用
在Hexo 博客中如何引用

先上图看一下效果

这是一个Chatra 提供的使用js 编写小程序。

可以挂在html 里面通过外部设置更改，摆放位置，显示颜色，提示语言。

Html 中引用

需要将以下这段js 代码添加到你的html 文本中的任意位置，最好是放在<head> 标签内

<!-- Chatra {literal} -->
<script>
    (function(d, w, c) {
        w.ChatraID = '****************';
        var s = d.createElement('script');
        w[c] = w[c] || function() {
            (w[c].q = w[c].q || []).push(arguments);
        };
        s.async = true;
        s.src = 'https://call.chatra.io/chatra.js';
        if (d.head) d.head.appendChild(s);
    })(document, window, 'Chatra');
</script>
<!-- /Chatra {/literal} -->

这段代码在Chatra 的网站上可以找到

下面可以设置，图标形状，颜色，提示语，是否离线显示，是否在手机浏览器显示，等等等等

在`Hexo` 博客中如何引用

Hexo已经替我们写好了代码并默认隐藏了，所以我们只需要配置网站根目录下的_config.yml 文件就可以了

配置Chatraid
将enable 置true
id 就是Chatraid 就是官网提供的代码中可以找到。

chatra:
  enable: true #false
  async: true
  id: ************

添加额外按钮如果你想在sidebar 内头像和sns之间插入一个char 按钮的话
可以改成如下配置。因为我觉得太丑了，原装的按钮🔘已经足欧明显了，就让我关了

chat:
  enable: true 
  service: chatra
  #service: tidio
  text: Chat # Button text, change it as you wish.

转载请注明来源 https://tianweiye.github.io

基于Chatra-的聊天Widget

先上图看一下效果

Html 中引用

在Hexo 博客中如何引用

在`Hexo` 博客中如何引用