facebookreactjsfacebook-customer-chat

React - Unknown prop `page_id` on <div> tag. Remove this prop from the element

I'm integrating Facebook's Customer Chat Plugin to my website. In the instructions it says:

include a div with the following attributes in your HTML:
<div class="fb-customerchat"
 page_id="<PAGE_ID>"
 ref="<OPTIONAL_WEBHOOK_PARAM>">
</div>

When I did so (this is the React version) :

<div className="fb-customerchat"
 page_id="<PAGE_ID>"
 ref="<OPTIONAL_WEBHOOK_PARAM>">
</div>

... I got this error from React: Warning: Unknown proppage_idon <div> tag. Remove this prop from the element. For details, see https://reactjs.org/warnings/unknown-prop.html, and the customer chat plugin isn't shown at all (I can still find the HTML elements in the DOM tree).
I did some searching and it seems like React doesn't recognize the custom page_id attribute. I tried changing it to data-page_id but it doesn't help.
Have anyone encountered the same problem and how did you resolve it ?

Solution

  • I found out that the Customer Chat Plugin needs an HTML element inserted into the DOM with the parameters specified. With React, you're never passing in raw HTML, hence the error message. To resolve this, you can do either:
    - insert the .fb-customerchat div directly to your HTML or
    - use this package: https://github.com/Yoctol/react-messenger-customer-chat which is a workaround for React