[vue.js nuxt教学]在你网站架设Facebook messenger吧(Facebook Customer c

网站上架设Facebook messenger为你的网站创造与使用者更高的互动吧！

前言

之前因为公司需求，希望在网站内加入Facebook messenger
好让使用者可以及时络客服人员
以解决他们目前遇到的问题
但我先在自己的网站中练习製作，所以以下教学皆是我的网站展示

先看看成果如图：

製作步骤

先在你的中终端机上安装套件
npm install vue-fb-customer-chat

以下所有设定位置，可能会随着facebook更新而移动位置

接着在左侧菜单点选讯息

这时应该可以看到有关messenger的设定了吧！

加油！快成功了！只要在几步骤结束了！！

我们赶紧点选立即开始

看到以下画面时，就一直点选继续

以下这步骤非常重要！！！
左侧新增其他网域是负责让Facebook messenger知道你的网址(部落格)
并且只接受正式网域，所以如果是在localhost测试是没有效果的哦！
https://comeuser85924.github.io/

注:以上是我的网站，我将网站布署在gitpag，并且gitpag只接受静态网站

因为这次我们的环境是nuxtJS
还记得我们先前安装了vue-fb-customer-chat 吧？！

(如果你只是一般HTML、JS开发环境的话，只需複製右边程式码直接贴到你的HTML中即可)

我们需要使用这个套件
所以右侧的code我们只需要page_id
请先複製好！

我们回到code本身
我们在plugins资料夹下新增一个vue-fb-customer-chat.js

import Vue from 'vue'import VueFbCustomerChat from 'vue-fb-customer-chat' Vue.use(VueFbCustomerChat, {  page_id: "xxxxxxxxxxxxxxx", // 输入 Facebook Page ID,  theme_color: '#6699cc', // 设定messenger颜色  locale: 'zh_TW', // 设定语言  logged_out_greeting:"嗨~有问题可以私讯我喔！", //登入状态欢迎词  logged_in_greeting:"您好，很高兴为您服务" //登出(未登入)状态欢迎词})

複製以上程式码到你的档案中

并将你的Facebook Page ID替换上去

之后在你想呈现的页面中加入

<div id=”fb-root”></div>

如果你是中大型网站，想全站都有messenger的话
就放置在你们的header中吧

在你的nuxt.config.js中plugins加入
{ src: '~/plugins/vue-fb-customer-chat.js', ssr: false }

最后只要打包编译就大功告成了！！

另外有个需要要注意的地方！

有时候我们因为需要配合第三方的chatbot (ex.CHATISFY)
来完成我们的聊天机器人
所以在设定chatbot时候，chatbot网站会自动更新你粉专中的网域名称
此时可能粉专中的先前所输入的网址会吃掉

所以导致网站上的messenger失效
这时候只要再将你的网址重新贴上去即可