Home / Integrations

How to Add Facebook Messenger to Your Website

Customer Success Team

Last updated on Dec 25, 2023

Facebook Messenger is one of the most popular chats in the world. You can now integrate it into your Ucraft Website.

Step 1: To get started, head over to Facebook for Developers and hit My Apps in the upper right corner. You’ll notice an option to ‘Add New App’.

In the pop up, enter your Display Name and Contact Email and click Create App ID.

Step 2: From the left panel, click Product + then choose ‘Messenger’ and hit ‘Set up.’

Step 3: Then go to ‘Settings’ on the left panel → Basics and copying the App ID. From the top of your screen, enable the Status switcher.

Step 4: Once you enable it, choose ‘Business and pages’ from the Category section then click Confirm.

!TIP: Make sure to provide the Privacy Policy URL as well.

Step 5: Hit Save Changes on the bottom of the page.

Step 6: Go to your Facebook page, from the left side click on the ‘About’ section, then scroll down until you find your ‘Page ID’.

Step 7: The final call would be moving to the ‘Messenger Platform’ from the ‘Settings’ bar and having your Domain whitelisted.

Step 8: In addition to this, you will also need to update your Subdomain along with Custom Domain (if there’s any) in Page settings by doing the following:

  1. Click Settings at the top of your Page

  2. Click Messenger Platform on the left

  3. Edit whitelisted domains for your page in the Whitelisted Domains section.

Step 9: Afterwards, scroll down to Customer Chat Plug In and hit Set Up.

You can customize the language and the greeting your customer will get once the Messenger pop-up is available on your site.

In the next section, you can also customize the colors of your chat to fit your business/brand. Simply enable the Custom Colors option and choose what color you want from the below option.

Step 10: Then, in the last section, add your website domain and choose the option you want for installing the code.

Step 11: If you choose the 'I'll install the code myself' option, simply copy the code on the right → go to your Dashboard on Ucraft → Integrations App → find the Messenger among the numerous integrations out there paste your code in the Code Snippet section and hit ‘Connect.’

The light will go green indicating that the platform is successfully connected!

Time to check it out in action. Simply access your site in public mode or hit ‘Preview’ to find the Messenger icon in the lower right corner.

Have more questions? We recommend checking out these Articles for a bigger view of Ucraft.

And always remember, we're just a step away! Hit the Chat box in the lower right corner and our Support Team will be glad to assist you!