如何在 Nuxt、Vue 中实现 Facebook Messenger 客户聊天 SDK？答案

【问题标题】：How to implement Facebook Messenger customer chat SDK in Nuxt, Vue?如何在 Nuxt、Vue 中实现 Facebook Messenger 客户聊天 SDK？
【发布时间】：2020-06-24 04:10:34
【问题描述】：

我在我的 Nuxt 应用中使用 Facebook Messenger 客户聊天 SDK 进行此实施。

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

解决方案 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.js nuxt.js facebook-messenger facebook-chatbot facebook-customer-chat

【解决方案1】：

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

【讨论】：

按照文档后我似乎无法让它工作。在插件文件夹中添加一个 .js 文件并将插件包含在 nuxt 配置文件中。我还需要做什么吗？
我有同样的问题，我已经在一个真实的 url 上实现了它，即 https，我仍然一无所获。
@JamieBonnett，您使用的是 Nuxt 还是 Vue？
@StivenRamírezArango Nuxt

【解决方案2】：

您可能还需要在页面消息设置中将您的网站域列入白名单。

为此，您可以点击此链接https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/

【讨论】：

【解决方案3】：

FWIW，这是我在 Nuxt 中实现它的方法，无需安装 3rd 方包，它正在工作。

您的default.vue 布局：

...

<div id="fb-root"></div>
<div id="fb-customer-chat" class="fb-customerchat"></div>

...

您的nuxt.config.js（这是 Facebook 要求您插入的脚本，因此请按照您自己的说明进行复制）：

...

script: [
  {
    type: 'text/javascript',
    hid: 'fb-customer-chat',
    body: true,
    innerHTML: `
      var chatbox = document.getElementById('fb-customer-chat');
      chatbox.setAttribute("page_id", YOUR_PAGE_ID);
      chatbox.setAttribute("attribution", "biz_inbox");

      window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'v11.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'));`
  },
],
__dangerouslyDisableSanitizersByTagID: { 'fb-customer-chat': ['innerHTML'] },

...

__dangerouslyDisableSanitizersByTagID 设置可确保 innerHTML 中隐藏为 fb-customer-chat 的代码不会被清理。

【讨论】：