如何添加 Facebook Messenger 以響應網站

Question

我開發了一個反應網站，我想添加 fb 信使來反應網站。 我有一個 HTML 格式的 fb 官方代碼，如何在 react 中添加它.. 請幫忙。 謝謝

<!-- Load Facebook SDK for JavaScript -->
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            xfbml            : true,
            version          : 'v8.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>

      <!-- Your Chat Plugin code -->
      <div class="fb-customerchat"
        attribution=setup_tool
        page_id="100522201771081">
      </div>

Answer 1

npm install react-messenger-customer-chat

然后它可以作為 React 組件導入。 pageId 和 appId 是必需的道具，所以記住將它們傳遞給它：

    import MessengerCustomerChat from 'react-messenger-customer-chat';
    const App = () => (  
      <div>
        <MessengerCustomerChat
          pageId="<YOUR_PAGE_ID>"
          appId="<YOUR_APP_ID>"
        />
      </div>
    );

    <MessengerCustomerChat
      pageId="<YOUR_PAGE_ID>"
      appId="<YOUR_APP_ID>"
      htmlRef={window.location.pathname}
    />

請檢查 git github https://github.com/Yoctol/react-messenger-customer-chat