Facebook Customer Chat with Next.js

facebook-customer-chat-demo.jsx

import { useState, Fragment } from 'react'
import Script from 'next/script'

/**
 * Facebook Customer Chat demo
 *
 * @see https://nextjs.org/docs/api-reference/next/script
 * @see https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk/
 * @see https://developers.facebook.com/docs/javascript/reference/FB.init/
 */
export default function Home() {
  const [fb, setFb] = useState(null)

  return (
    <Fragment>
      <Script
        id="facebook-jssdk"
        src="https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js"
        onLoad={() => {
          setFb(FB.init({
            appId: '{your-app-id}',
            status: true,
            xfbml: true,
            version: 'v12.0'
          }))
        }}
      />
    </Fragment>
  )
}