Как реализовать SDK клиентского чата Facebook Messenger в Nuxt, Vue?

Я делал эту реализацию с помощью SDK клиентского чата Facebook Messenger в моем приложении Nuxt.

Решение 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.

Окно чата появилось и исчезло, затем оно перестало быть кликабельным @@

Пожалуйста, помогите мне добавить SDK клиентского чата Facebook Messenger в NuxtJS, есть ли пакет? пошаговое руководство?


person Nguyen Rim    schedule 12.03.2020    source источник
comment
Я столкнулся с той же ошибкой. Интересно, что на некоторых машинах моих коллег (не на всех) он отлично работает. У одного из коллег он работал в режиме инкогнито.   -  person Shiva    schedule 16.03.2020


Ответы (2)


https://www.npmjs.com/package/vue-fb-customer-chat работает, но страница с URL-адресом должна быть https, по этой причине он работает только в рабочем режиме.

person Stiven Ramírez Arango    schedule 31.03.2020
comment
Я не могу заставить его работать после выполнения документа. После добавления файла .js в папку плагина и включения плагина в конфигурационный файл nuxt. Мне нужно что-то еще делать? - person Tanpo; 24.04.2020
comment
У меня такая же проблема, я реализовал ее на реальном URL-адресе https, и я все еще ничего не получаю. - person Jamie Bonnett; 19.11.2020
comment
@JamieBonnett, вы используете Nuxt или Vue? - person Stiven Ramírez Arango; 19.11.2020
comment
@ StivenRamírezArango Nuxt - person Jamie Bonnett; 21.11.2020

Вам также может потребоваться внести домен вашего веб-сайта в белый список в настройках обмена сообщениями на странице.

Для этого перейдите по этой ссылке https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/

введите описание изображения здесь

person ariel1012    schedule 05.02.2021