Menu Close
    Hire us Request quote Reading list Switch to dark mode

    Facebook Chatbot For Magento 2

    Facebook Chatbot is a program developed for Facebook Messenger platform. It allows businesses to do automated communication with their customers. Chatbots can send and receive messages from the users. With the help of this extension, you can set up Facebook Chat Bots on your Facebook Page. The customers will get instant replies for their questions. Add reply message templates for salutation, not found, greeting, product search.

    Note – Facebook requires the endpoint to run over https, so before using this Facebook Chatbot extension please make sure your website should be hosted under HTTPS.

    Features

    • Enable or Disable Facebook Chatbot status.
    • Add content to various messages – greeting, not found, product search.
    • Add various product search keywords.
    • Show products from the store in the messenger.
    • The user can click the link to view the site, products, category.
    • The user can see product options( size, color) and all the images of the product.
    • Option to choose a price range in which user want to see products.
    • Supports Multiple language translations.
    • The source code is open for customization.

    Installation

    To install this extension, please follow each and every step carefully as follows:

    Step 1:

    After extracting the downloaded zip file and you will get the src folder. Inside src folder, you will find the app folder, copy the app folder to the Magento2 root directory. Please view the below screenshot.

    Step 2:

    After the successful installation, you have to run these commands in the Magento2 root directory.

    First command- php bin/magento setup:upgrade

    Second Command – php bin/magento setup:di:compile

    Third Command – php bin/magento setup:static-content:deploy

    After running the commands, you need to flush the cache and reindex all from the Magento2 admin panel. Navigate through System->Cache Management. Click Flush Magento Cache button as shown below:

    Language Translation

    If you need to do the module translation, please navigate the following path in your system. app/code/Webkul/Chatbot/i18n. Open the file named en_US.CSV for editing as shown in below screenshot.

    Once you have opened the file for editing. Replace the words after the comma(,) on the right with your translated words.

    After editing the CSV file, save it and then upload it to the same folder. Now your module translation is complete.

    Facebook Configuration

    Create a New App

    Before you begin, you need to get Facebook Access Token from here. Log in with your Facebook account and create an app. After opening the page, go to My Apps and click Add a New App. The following pop-up window will appear:

     

    After creating App ID, go to Add Product and click Set Up for Messenger.

     

    Token Generation

    After clicking Set Up, the following page will open. Now select your Facebook Page, a confirmation window will appear. Your Access Token will appear, after doing the confirmation. Copy the Access Token and enter the same in Magento 2  Chat Bot configuration.

     

    Once you have selected your  Facebook Page and copied your Access Token. Click Setup Webhooks, a pop-up window will appear.

     

    Here you need to enter your store URL in the Callback URL field. Please make sure that the URL is https(secure). You need to add the following in your URL.

    /chatbot/chatbot/index

    Eg. https://www.example.com/chatbot/chatbot/index

    Enter the verify Token, enter any text or name. This name should be the same for the Magento 2 Chat Bot configuration. Select all the Subscription Fields and click Verify and Save.

     

    Then, you need to select your Facebook Page for Webhooks too. Click Subscribe, as visible in the screenshot below.

     

    After that, go to Settings>Basic and enter the store address in Privacy Policy URL. Upload an image file for the App Icon (1024 x 1024).

    Module Configuration

    To do the module configuration, please navigate through Stores>Configuration>Chatbot. Following option will be available. Click Save Config, to apply your changes.

    Enable – Set the module status as Yes or No.

    Access Token – Enter the access token key obtained from the Facebook App.

    Verification Token – You can any text here, use the same text for the Facebook App set up.

    Enter the content for various messages.

    Update Greetings Message – You can change the greetings message and update it.

    Front-End View

    After logging in to the messenger, the customer can search for your page and start the chat. First, they will see the Welcome Greeting Message on the chat window.

    After clicking on “Get Started “ the user get the options to view the Site, Products, and Category.

    Price Range – The user able to select a range in which they want to see the products as per below screenshot –

    When users click on ” Show Site ” they redirect to your online store. Users can also use www.messenger.com .

    If users click on “Show Product ” then they able to see some store products by sliding as per below screenshot –

    Show Category – If users click on “Show Category” then users able to see all the main categories by sliding as per below screenshot. 

    In the category, the user will get three options –

    Show on Site – it will redirect to the site and display that main category.

    Child Categories – able to see the child categories by sliding and get three options (show on site, child category, show product ) of that child category.

    Show Products – able to see products of the main category by sliding. On the product page, the user will get three options (Show on site, Options, Images ).

    Show on Site – it will redirect to the site on the product page.

    Options –  Here the user can choose different- different options like – Size, Color etc. as per screenshot –

    When users choose an option( like- size,color etc). It will show values of that option – 

    Images – The customer can click the Images option for viewing the additional images of the product as per screenshot – 

    Salutation Message – If customer send a salutation message ( hello, hey etc.) then chatbot automatically gives the reply and display some products as per below screenshot –

     

    App Review for Messenger

    To make your Facebook App live, you need it to submit it to Facebook. Please go to App Review for Messenger and select pages_messenging, then click Add to Submission.

    Current Submission

    After adding the submission go to Current Submission and click Edit Notes.

    Send/Receive API (pages_messaging)

    The following pop-up window will appear, select your Facebook page first, and then enter the commands with the automated replies for the chatbot. Click Save to apply your changes and make the app go live.

    Thank you for viewing this blog. If you have any query or need more information, please visit webkul.uvdesk.com

    Current Product Version - 2.0.1

    Supported Framework Version - 2.0.x 2.1.x, 2.2.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 received your message and our expert will get back to you shortly.
    Send Again
    Close

    Table of Content

    Hide Index