Facebook Messenger is one of the most popular chats in the world. Now you can integrate it to your website created with Ucraft. In this step-by-step article we will guide you through that process.
Step 1: First, 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.
Step 5: Hit the ‘Save Changes’ button 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:
- Click Settings at the top of your Page
- Click Messenger Platform on the left
- 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 cat 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.
Said and done!
We suggest checking the rest of the integrations on our Help Section for more insightful articles and a bigger view at Ucraft and the opportunities available.