Vue如何使用接入反馈建议插件,使用vue-tawk在Vue/Nuxt 应用中接入tawk.to聊天

背景

前2天想在自己的网站中接入一个反馈插件，用来接收一下建议，没时间自己写（懒），就想找个插件，结果发现了tawk.to(目前是100%免费的)。
还是很吸引人的。我的网站是使用vue的nuxt框架，接入的时候也遇到了一些坑，就分享一下

问题

• 不知道怎么接入
• 需要如何配置
• 主要是不知道把接入代码放到哪，主要自己对框架还是不熟，熟悉了之后就应付自如了。

申请

访问：官方注册
如下方式注册账号即可

如下图，找到小工具代码中的s1.src，复制src特征代码字符串，一会用

安装vue-tawk

npm install vue-tawk --save
or
yarn add vue-tawk -D

初始化tawk应用

我们需要在我们的vue/nuxt应用中做2步操作

• 新建tawk,js文件
  在plugins文件夹下新建tawk.js
  
  文件内容：

import Tawk from 'vue-tawk'
import Vue from 'vue'
Vue.use(Tawk, {
    tawkSrc: '你的src，就是上文提到的s1.src中的特征字符串'
})

• nuxt.config.js
  需要加入一段代码，三方插件，src对应的就是刚刚的路径+文件名，其中ssr 要为false,否则渲染不出来。
  内容：

{src: '~/plugins/tawk', ssr: false}

之后启动就可以了，在界面的右下角渲染出来了。

总结

个人觉得这个插件功能还不错了，免费的，界面也不错！
可以参考我的这个网站：寻觅-python网，，体验一下交互，有问题欢迎留言私信！
感谢vue-tawk作者：vue-tawk