Step 1. Whitelist your site
To make a Facebook Messenger chat button, you'll need to whitelist your Facebook page first.
How to whitelist your Facebook page:
- Login to your Facebook page's admin account and visit this page:
Meta Business Suite page
- Inside the Website domain box, click on the edit button.
- Add your domains.
- Save the settings when you're done.
I recommend to whitelist your site with and without "www" just to make sure.
Your site must also meet these requirements from Facebook:
Domain Name and HTTPS Required
Domains must meet the following requirements to be whitelisted:
- Served over HTTPS
- Use a fully qualified domain name, such as https://www.messenger.com/. IP addresses and localhost are not supported for whitelisting.
Step 2. Page ID
After you have whitelisted your Facebook page, you have to copy your Page ID from Facebook. So you can insert it in Buttonizer!
Visit the Meta Business Suite page again and you should find your Page ID from the URL bar.
You can also just copy the whole link and paste it into Buttonizer instead. We will get the page ID automatically for you. 😉
Step 3. Buttonizer!
Once you have your Page ID, you can simply copy and paste it into the Facebook Messenger Chat Widget action input!
Go back to Buttonizer, underneath the button action you have the option to fill in the Facebook page ID. Paste the page ID or URL that you copied from Facebook here.
Errors
If you've done the steps above and the messenger chat box still does not appear, here's a list on why it might not be working!
Your Facebook Page is in private.
The chat box will not appear if the Facebook Page is set to private.
Check if your site has the script:
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
A plugin or theme might be including Facebook's old SDK. It conflicts with the new SDK and doesn't let the chat box appear.
Using a localhost or IP address.
Accidentally not clicking the save button after whitelisting the site.