Integrate Facebook Messenger Live Chat into Your Next.js Website

Want to chat with your users in real-time? In this guide, you’ll learn how to quickly integrate Facebook Messenger Live Chat into your Next.js app — step by step. Improve support, boost engagement, and stay connected with your visitors effortlessly.

1. Sign in the Facebook business

Sign up and sign in the Facebook business account on this link After that, click on the Inbox button on the left navigation bar

business suite facebook dashboard

Click on the Settings button on the top navigation bar

inbox Facebook business suite

Copy the page id

inbox setting Facebook business suite

Save this value on the .env file

bash
NEXT_PUBLIC_FACEBOOK_PAGE_ID="510835332xxxxxx"

You can use this environment variable to create a constant value to reuse /constants/routes.ts

js
export const FACEBOOK_CHAT_URL = `https://m.me/${process.env.NEXT_PUBLIC_FACEBOOK_PAGE_ID}`;

Now you can use this link for any a tag:

jsx
<a href={FACEBOOK_CHAT_URL} target="_blank">Contact me now!</a>

You can refer more the Live chat component which will float on the right bottom corner of screen.