Skip to content

Appendix C. Integrate Into Your Site

This appendix shows you how to integrate Messenger directly into your website. This allows your customers to interact with WcBot anytime, to help you sell more products. Below is an example WooCommerce site which integrated WcBot.

(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

This technology is called "Messenger Customer Chat". There has several WordPress plugins provide this technology for WordPress sites. Below section uses "Customer Chat for Facebook" plugin and mentioned the installation steps.

Preparation Works

Before install the 'Customer Chat for Facebook'. You'll need to prepare the Facebook Page ID and Facebook App ID.

Obtain Facebook Page ID

Login to your Facebook Page. (Refer this chapter to create one if you don't have). Then follow below steps:

(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

The Facebook Page ID is covered in 'About':

(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Now you can copy & paste the Page ID to Notepad.

Add Whitelisted Domain

To allow Messenger accessible for your website, you need to enter your domain into Messenger whitelisted domains. To do that, go to your Facebook Page settings as follows:

(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Scroll down to 'Whitelisted Domains' section:

(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Obtain Facebook App ID

Login to Facebook Developer Portal and select your Facebook App as follows (Refer this chapter to create one if you don't have):

(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

The Facebook App ID is covered in dashboard:

(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Now you can copy & paste the App ID to Notepad.

Install The Plugin

You can find "Customer Chat for Facebook" plugin in WordPress marketplace.

Find And Download The Plugin

Login to your WooCommerce site as Admin, e.g. https://www.yoursite.com/wp-admin, then below steps:

(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Then install and activate the plugin, as follows:

(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Configure The Plugin

Go to the settings screen, as follows:

(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Copy & paste the values of Facebook Page ID and Facebook App ID to settings screen, as follows:

(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

That's all. You should see WcBot appears on your website.


Comments