时间戳

首页 > 解决方案 > 如何在 Nuxt、Vue 中实现 Facebook Messenger 客户聊天 SDK？

vue.js - 如何在 Nuxt、Vue 中实现 Facebook Messenger 客户聊天 SDK？

问题描述

我在我的 Nuxt 应用程序中使用Facebook Messenger 客户聊天 SDK执行此操作。

解决方案 1（成功率为 0%）：
我尝试了https://www.npmjs.com/package/vue-fb-customer-chat包，但没有成功，包的站点本身已关闭 -.-！我导入它并将其用作插件等等，我完全按照指示进行了操作，我什至也尝试使用<VueFbCustomerChat />and <vue-fb-customer-chat />as extra，但似乎没有任何效果！

解决方案 2（工作 50%）：
此外，我尝试通过创建一个名为fb-sdk.js并成功部署的静态文件将其用作静态文件：

window.fbAsyncInit = function() {
  FB.init({
    xfbml: true,
    version: "v6.0"
  })
}
;(function(d, s, id) {
  var js,
    fjs = d.getElementsByTagName(s)[0]
  if (d.getElementById(id)) return
  js = d.createElement(s)
  js.id = id
  js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js"
  fjs.parentNode.insertBefore(js, fjs)
})(document, "script", "facebook-jssdk")

我在这里的结果，在使用它作为静态文件插件之后

但是当我开始使用它聊天时出现此错误：

ErrorUtils caught an error:

a.substr is not a function. [Caught in: React reported an error]

Subsequent errors won't be logged; see https://fburl.com/debugjs.

聊天框出现又消失了，然后就不能点击了@@

所以请帮我将Facebook Messenger 客户聊天 SDK添加到NuxtJS中，有包吗？一步一步的教程？

标签： vue.jsnuxt.jsfacebook-messengerfacebook-chatbotfacebook-customer-chat

解决方案

https://www.npmjs.com/package/vue-fb-customer-chat有效，但 URL 页面必须是 https，因此它只能在生产模式下工作。

推荐阅读