How to add Facebook Messenger chat plugin in your website
Adding the Facebook Messenger chat plugin to your website can help you connect with your audience and provide real-time customer support. With the 2023 update, integrating the chat plugin into your Reactjs or Nextjs website is easier than ever. Follow these simple steps to add the Facebook Messenger chat plugin to your website.
Step 1: Create a Facebook App
Go to the Facebook for Developers website and create a new app. Once you have created the app, go to the Messenger Platform settings and generate a Page Access Token for your Facebook page. This token will allow you to connect your website to your Facebook page’s messaging system.
Step 2: Get the Messenger Code
Once you have obtained the Page Access Token, go to the Messenger Settings section of your Facebook page and click on “Add Messenger to your website”. This will generate a code snippet that you can use to embed the Messenger chat plugin into your website.
Step 3: Integrate the plugin into your Reactjs or Nextjs website
If you are using Reactjs or Nextjs for your website, you can easily integrate the Messenger chat plugin using the following steps:
- Install the “react-messenger-customer-chat” package using npm or yarn.
- Import the MessengerChat component into your React or Next component.
- Set the appId and pageId props of the MessengerChat component to your Facebook app ID and page ID.
Step 4: Customize the plugin
You can customize the appearance and behavior of the Messenger chat plugin by passing additional props to the MessengerChat component. For example, you can set the theme color, greeting message, and other options to match your website’s branding and provide a personalized experience for your users.
Step 5: Test and deploy
Once you have integrated the Messenger chat plugin into your website, test it to ensure that it is working properly. You can then deploy the changes to your website and start engaging with your audience through Facebook Messenger.
Conclusion
Adding the Facebook Messenger chat plugin to your website can improve customer engagement and provide a seamless communication channel for your audience. With the updated integration process for Reactjs and Nextjs websites, it is now easier than ever to add the Messenger chat plugin to your website and provide real-time customer support.
You really helped me brother. I appreciate
I am facing an issue. When I send the message in chat it shows an error message.
The content you requested cannot be displayed at the moment. It may be temporarily unavailable, the link you clicked on may have expired or you may not have permission to view this page.
Thanks a lot brother…keep making this kind of awesome video <3
Hello, Although public to vercel and add whitelist domain to facebook page, but i still received error: 'CORS policy: No 'Access-Control-Allow-Origin''. Do i need publish facebook app? Thanks in advanced
Hi guy, Can we hide the bubble and trigger clicking using another hook with this package "react-facebook"?
Is there anyway to change the color of the background?
Thank you
Facebook business is down for me
your code cette application
Thank You, Sir, This video is beneficial for us. I was searching for this kind of chat plugin for my portfolio.
Sir we are waiting for React native projects plz make as soon as possible