CODEWITHSUNDEEP
reactjsfacebook-messengerlivechat
nazanaza
nazanaza

Reputation: 33

How do I integrate messenger chat plugin in react?

I am trying to integrate messenger live chat to my react website. I have tried the npm package react-messenger-chat-plugin but it is not working. I have tried to use the meta business suit to do so, and it provided me with the following code:

<!-- 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>

but I do not know how I should add it to my code. I created the following function:

    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>
        </>
    );
}

and tried to call it inside reactdom.render. It does not work. How to do I solve this?

Upvotes: 2

Views: 3533

Answers (3)

vulam
vulam

Reputation: 11

here the typescript version

interface FacebookChatPluginProps {}

declare global {
  interface Window {
    fbAsyncInit: () => void
    FB: {
      init: (params: object) => void
    }
  }
}

const FacebookChatPlugin: FunctionComponent<FacebookChatPluginProps> = () => {
  const pageId = '238066656049200'

  const MessengerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (MessengerRef.current) {
      MessengerRef.current.setAttribute('page_id', pageId)
      MessengerRef.current.setAttribute('attribution', 'biz_inbox')

      window.fbAsyncInit = function () {
        window.FB.init({
          xfbml: true,
          version: 'v16.0',
        })
      }
      ;(function (d, s, id) {
        const fjs = d.getElementsByTagName(s)[0]
        if (d.getElementById(id)) return
        const js = d.createElement(s) as HTMLScriptElement
        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>
    </>
  )
}

Upvotes: 1

Leon
Leon

Reputation: 46

Thank for the Nazanaza's anwser I have finish this component. Hope it can help

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;

Upvotes: 3

nazanaza
nazanaza

Reputation: 33

So I found a solution.I used useEffect hook in this way:

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'));

}, [])

Then in the return statement where jsx is, put-

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

You have to have it hosted and the hosted domain to be whitelisted for this to work.

Upvotes: 1

Related Questions