Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    Facebook Messenger Chat for WooCommerce

    Facebook Messenger Chat for WooCommerce provides an easy and interactive sales experience to the customers. The customers can chat with the admin of a site vice-versa through facebook messenger.

    The best thing an e-commerce site can offer its customers is that they don’t have to walk into the store. At the same time, it is also essential to keep in touch with the customers and engage with them.

    This can easily be accomplished by using the Facebook Messenger Chat for WooCommerce. The admin creates the Page ID and the App ID and selects a domain of the page where the admin wishes to display the messenger.

    The messenger icon shall display in the frontend. One needs to login to the messenger and start a conversation.

    Therefore, it has become quite easier for e-commerce sites to reach out to a large number of customers through Facebook Messenger Chat plugin. It is the most feasible way to drive traffic to a site and generate revenue.

    Features

    • Admin can chat live via facebook messenger.
    • The admin sets the domain of the page where the admin wishes to display the messenger icon.
    • Admin can display the messenger icon on all the frontend pages such as my account, cart page, etc.
    • A color for the messenger icon can be chosen by the admin.
    • A feasible way to engage with the customers.
    • Client handling is much easier.

    Installation

    The user will get a zip file which needs to be uploaded in the “Add New” menu option in the WordPress admin panel.

    For this login to WordPress Admin Panel and in the Dashboard hover your mouse over the “Plugins” menu option select the “Add New” option.

    After this, the user will see an option on the top of the page that is “Upload Plugin”, click the option to upload the zip file.

    On clicking the “Upload Plugin” option, the user will see a “Choose File” button. Click on the button to browse for the zip file as per the image below.

    After browsing the file, click on the “Install Now” button so as to install the plugin as per the snapshot.

    Once the user installs the plugin, a message “Plugin installed successfully” displays and an “Activate Plugin” is visible to activate the plugin. The user needs to click on the “Activate Plugin” button to activate the plugin.

    Obtaining the Page Id

    In order to set the configurations of the module, the admin needs to fetch the Page ID and the App ID from Facebook.

    Given below are the few easy steps to obtain the Page ID from Facebook.

    Step 1:

    • The user needs to log in to Facebook by simply entering the login id and password.
    • In the Home Page, on the left corner, the user will have to navigate through Explore > Pages as shown in the image below.

    Step 2:

    • On clicking the Pages tab, it redirects the user to ‘Liked Pages’ page where an option “Create Page” is given.
    • The user can click on “Create Page” as shown, so as to create a new page.

    Step 3:

    • Under “Create a Page” the user will have to choose ‘Page Category’, as in the image below the user has chosen “Business or brand.”

    Step 4:

    • On clicking the Get Started button after choosing the Page Category, it redirects the user to the “Create a Page” page.
    • The user can go forth and add the “Page Name” and choose a “Category” from the dropdown list.
    • In the image below the user adds the Page Name as “Woo Webkul” and chooses the Category as “E-commerce website” from the dropdown list.

    Step 5:

    • On clicking the “Upload a Profile Picture” as shown in the image, the user can add a profile picture which best links or associates with the page.
    • Similarly, a cover picture can be uploaded by the user for the page.

    Step 6: 

    • The page which the user creates will display as shown in the image below.

    Step 7:

    • The user can find the Page ID by navigating through About > Page ID, as shown in the image below.
    • The admin can use this Page ID for the module configuration.

    Obtaining the App ID

    Step 1:

    • The user needs to login to the facebook developers page by hitting the following link- https://developers.facebook.com/
    • In the “facebook for developers” page, the user will come across an option My Apps as shown.

    Step 2:

    • As the user clicks on the My Apps option, a drop-down pop up appears, where the user can tap on the Create New App, so as to create a new app id as shown in the image below.

    Step 3:

    • On clicking the Create New App tab, a pop up appears as shown in the image below.
    • The user will have to enter the “Display Name” and “Contact Email” and simply click on the Create App ID. 

    Step 4:

    • The APP ID for the page woo webkul is created as shown in the image below.
    • In the next step, the user will have to link the APP ID with the page.

    Step 5: 

    • The user will have to open the created page.
    • In the image below, on the right corner of the Woo Webkul page, the Settings option is available.

    Step 6:

    • On clicking the Settings tab, the user will encounter an option- Messenger platform. 

    Step 7:

    • The user will have to navigate through Messenger platform > Link your app to your Page. 
    • Under Link your app to your Page, the user will have to add the APP ID retrieved from the facebook for developers page as shown in Step 4.
    • Also, the user will have to navigate through Messenger platform > White-listed domains. 
    • Under White-listed domains, the user needs to add the domain of the page on which the messenger icon shall display on the frontend for the customers.

    Module Configuration

    The admin can add configurations for WooCommerce Facebook Messenger Settings in the admin dashboard by clicking on the Facebook Chat Messenger tab.

    The admin can configure the Facebook Messenger settings as follows:

    App Id: Admin obtains the App Id from the facebook for developers page.

    Page Id: The admin obtains the Page Id from Facebook.

    Theme Color: Admin chooses a color from the color palette for the messenger’s theme.

    Welcome Message: A message, which shall display as the customer logs in to the messenger.

    Logged Out Message: A message will display after the customer logs out of the messenger.

    Enable/ Disable: The admin can choose to enable or disable the plugin.

    Frontend Workflow

    The user can log in to the frontend and view the messenger icon on the right-hand bottom corner as shown in the image below.

    The customer will have to log in to the messenger so as to start a conversation as shown in the image below.

    As the customer clicks on the Log into Messenger tab in the above image, it redirects the customers to the messenger login.

    The customer can enter the credentials for the messenger. The messenger chat box opens and the customer can start off the conversation as shown in the image below.

    Note: The Messenger shall display in the frontend only on the pages which the admin configures under the White-listed Domain section. 


    Not only text messages, but the customers can also send images to the admin using the facebook messenger chatbox as shown in the image below.

    The customer can also share doc files using the facebook messenger chatbox as shown in the image below.

    That’s all for the Facebook Messenger Chat for WooCommerce. Still, have an issue feel free to add a ticket and let us know your views to make the module better webkul.uvdesk.com

    Current Product Version - 1.0.0

    Supported Framework Version - WooCommerce 3.0.x, 3.1.x, 3.2.x, 3.3.x, 3.4.x,3.5.x

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close

    Table of Content

    Hide Index