Reading list Switch to dark mode

    Magento 2 Facebook Messenger Chat

    Updated 17 October 2023

    Magento 2 Facebook Messenger Chat: Using this extension, the admin of the Magento 2 website will be able to integrate Facebook Messenger within his website thus allowing the customers to chat with the admin.

    Hence, after configuring the extension, the Facebook Messenger widget will be visible at the webstore frontend.

    Features

    • Allow admin to enable or disable Facebook messenger chat.
    • Allow admin to set color theme of Facebook messenger chat.
    • The admin can set logged in greeting message of Facebook Messenger Chat.
    • Allow admin to set logged out greeting message of Facebook messenger chat.
    • A quick single tap activates the chat window.
    • Customers can send images, documents, file attachments in messages.
    • All the conversations are stored in Facebook Messenger.
    • Link to visit the End Chat, Turn Off Messages,  Mute Conversation, Something’s Wrong, Visit Facebook Page, Add Messager To Your Website.

    Installation

    Follow the below steps for installing the extension –

    First Step:

    Unzip the respective extension zip and and then move “app” folder (inside “src” folder) into magento root directory on the server.

    magento 2 facebook chat

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    Second Step:

    Now, run the below-mentioned commands in the Magento 2 root directory via terminal.

    1st Command  –  php bin/magento setup:upgrade

    2nd Command –  php bin/magento setup:di:compile

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

    Third Step:

    Lastly, flush the cache and re-index all by navigating through System->Cache management.
    Magento 2 Facebook Messenger Chat Flush Cache

     

    Language Translation

    For translating the module language, navigate through src/app/code/Webkul/FbMessengerChat/i18n and edit the en_US.csv file. Thereafter, rename the CSV as “en_SA.csv” and translate all right side content after the comma in the Arabic language. After editing the CSV, save it.

    Magento 2 opencart connector language translation

    Now, upload it to the path src/app/code/Webkul/FbMessengerChat/i18n where the installation of Magento 2 is on the server. The module gets translates into the Arabic Language. It supports both RTL and LTR languages.

    The user can edit the CSV like the image below.

    Screenshot-from-2023-06-26-12-04-43

    Module Configuration Settings

    After the successful installation of the extension, the admin will configure the module. Hence, to do so, navigate through Stores->Configuration->FB Messenger Chat Module.

    192.168.15.134_fbchat_pub_admin_admin_system_config_index_key_ce6c0d65573e0ce8d714f642fc9ddf9c0c4691b46cd80010c98b576140c60032_asd

    Here, the admin will –

    • Enable:
      Select Yes to enable the extension else select No to disable it.
    • FB Page Id:
      The admin needs to enter the page ID of the page that the admin wants to integrate with the Magento 2 store.
    • Logged In Greeting
      Enter the greeting message that will get displayed on login.
    • Logged Out Greeting
      Enter the greeting message that will get displayed on logout.
    • Theme Color
      Choose the theme color for the messenger.

    How to Get the Facebook Page ID?

    The admin will login to his Facebook account. Hereafter, create a new page or select an existing page by navigating to Pages section.

    Facebook Messenger Chat
    So, now, select the page for which the admin wants the page Id.

    Facebook Messenger ChatNow, after reaching the required page navigate to its About.

    Facebook Messenger Chat Facebook about page section

    However, here the admin will be able to find the Page ID under the Page Transparency settings.

    Facebook Messenger Chat Page transparency settings

    How to Add Magento 2 Store to Your Facebook Page?

    To log in to your Facebook business account, tap here

    After login, open the page settings by searching your business asset in the top left-hand corner.

    2-6

    After that, you can see the selected page and the settings for the same. 

    business.facebook.com_latest_home_asset_id_104641995841179_business_id_3528408530723781_nav_ref_bm_home_redirect_1120_80_

    Now go to the messages section and at the top tap the Cog icon to display the settings. Here, select the View All Settings option. 

    1-7

    This brings up the settings and navigate to the messaging section to get the Messenger URL.

    business.facebook.com_latest_inbox_settings_messaging_asset_id_104641995841179_business_id_2141330932840988_nav_ref_bm_home_redirect_selected_item_id_101548722992696_mailbox_id__1120_80_

    After this, navigate to messaging section and Set up option.

    business.facebook.com_latest_inbox_settings_chat_plugin_asset_id_106679358799917_business_id_2141330932840988_nav_ref_bm_home_redirect_1120_80_

    Now, tap the Setup button.

    setup

    Choose the default Language. Thus, tap the Save & Continue button as per the below image.

    language setup

    Henceforth, now, select Add Domain, to add the domain for all websites that you would like the Chat plugin to appear on, then Tap Save and Continue.

    add domain

    After this, Copy the code by clicking  Copy Code then click Next.

    copy code

    So, we will be redirected to the final step tap Finish > Done.

    (Paste the code snippet directly after the opening <body> tag on each web page where you want the Chat plugin to appear).

    configuration

    Workflow – Store Frontend

    The customers will be able to see the messenger icon on the webstore frontend.

    Messenger appearance on store

    So, if the customer is not already logged into Facebook then he can see the “Log Into Messenger” button as shown below in the snapshot.

    without login messenger
    Tapping the Log into Messenger button, a pop-up window will appear. Thus, allowing the customer to enter his email address and the password to continue.
    login to messenger
    So, after login, the customer will be able to chat with the admin of the store as shown below in the snapshot.

    Magento 2 Facebook Messenger Chat

    Thus, apart from allowing the chat, it supports: Send Images, Documents, File Attachments.

    Magento 2 Facebook Messenger Chat

    Information Icon

    Hereafter, clicking on the Information Icon(i) on the top right-hand header of this chat window there area few options as shown below in the snapshot.

    store front Facebook Messenger Chat

    Here, we have few options to check –

    1. End Chat:
      Customers can end the chat from their side.
    2. Turn On/Off Messages:
      Turning this option to On will allow the message transmission. However, setting it as No stops message transmission.
    3. Mute Conversation:
      If this option is enabled then the customer will be able to mute the conversations.
    4. Something’s Wrong:
      Customers can report any spam or a problem that they face.
    5. Visit Facebook Page:
      Clicking on this option will redirect to the Facebook page for which configuration has been made.
    6. Add Messenger to Your Website:
      Redirects to the “Add Messenger to your website” page. Thereafter, here you can know how the messenger works.

    So, that’s all for the Magento 2 Facebook Messenger Chat extension. Still, have issues, get back to us at [email protected] or send in a ticket at webkul.uvdesk.com

    Current Product Version - 4.0.1

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content