如何在React中集成Messenger聊天插件？

Question

我正在尝试将即时聊天工具集成到我的 React 网站中。我已经尝试过 npm 包 react-messenger-chat-plugin 但它不起作用。我尝试使用元商务套装来执行此操作，它为我提供了以下代码：

<!-- Messenger Chat Plugin Code -->
    <div id="fb-root"></div>

    <!-- Your Chat Plugin code -->
    <div id="fb-customer-chat" class="fb-customerchat">
    </div>

    <script>
      var chatbox = document.getElementById('fb-customer-chat');
      chatbox.setAttribute("page_id", "106619385564023");
      chatbox.setAttribute("attribution", "biz_inbox");
    </script>

    <!-- Your SDK code -->
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'v15.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'));
    </script>

但我不知道如何将它添加到我的代码中。我创建了以下函数：

    const MsngrLiveChat=()=>{

    var chatbox = document.getElementById('fb-customer-chat');
    chatbox.setAttribute("page_id", "106619385564023");
    chatbox.setAttribute("attribution", "biz_inbox");

    window.fbAsyncInit = function() {
        FB.init({
        xfbml            : true,
        version          : 'v15.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'));

    return(
        <>
        <div id="fb-root"></div>

        <div id="fb-customer-chat" class="fb-customerchat">
        </div>
        </>
    );
}

并尝试在reactdom.render中调用它。这是行不通的。我该如何解决这个问题？

Answer 1

感谢 Nazanaza 的回答，我已经完成了这个组件。希望能帮到你

const ChatBot = () => {
const MessengerRef = useRef();
useEffect(() => {
    MessengerRef.current.setAttribute('page_id', 'your_page_id');
    MessengerRef.current.setAttribute('attribution', 'biz_inbox');

    window.fbAsyncInit = function () {
        window.FB.init({
            xfbml: true,
            version: 'v16.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');
}, []);
return (
    <>
        <div id="fb-root"></div>
        <div ref={MessengerRef} id="fb-customer-chat" className="fb-customerchat"></div>
    </>
);
}; 
export default ChatBot;

Answer 2

所以我找到了解决方案。我这样使用了useEffect hook：

useEffect(() => {

    MessengerRef.current.setAttribute("page_id", "your_page_id");
    MessengerRef.current.setAttribute("attribution", "biz_inbox");

    window.fbAsyncInit = function () {
        FB.init({
            xfbml: true,
            version: 'v15.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'));

}, [])

然后在jsx所在的return语句中，放入-

<div id="fb-root" style={{ display:showMsngr?"block":"none" }} ></div>
        <div ref={MessengerRef} id="fb-customer-chat" className="fb-customerchat">
        </div>

您必须将其托管并将托管域列入白名单才能正常工作。

Answer 3

应用程序 ID 是否需要，如果需要，我应该在哪里添加它。我在本地主机中收到 cors 错误，我应该如何检查我的聊天框是否正常工作。我正在使用nextjs