How to add the customer chat plugin of facebook into Magento 2
Hi everybody, I am Cuong, Welcome to my Magento 2 tutorial video series.
Today, I am going to show everybody a best practice, How to add the customer chat plugin of facebook into Magento 2.
The Messenger Platform’s customer chat plugin allows you to integrate your Messenger experience directly into your website. This allows your customers to interact with your business anytime with the same personalized, rich-media experience they get in Messenger.
The customer chat plugin automatically loads recent chat history between the person and your business, meaning recent interactions with your business on messenger.com, in the Messenger app, or in the customer chat plugin on your website will be visible. This helps create a single experience for your customers and enables you to continue the conversation even after they have left your webpage. No need to capture their information to follow up, just use the same conversation in Messenger.
To integrate The Messenger Platform’s customer chat plugin into your Magento 2 website, you need to follow the below steps:
Step 1: Create a new module named PHPCuong_CustomerChatbox
– Create the namespace PHPCuong in the path appcode.
– Create the module named CustomerChatbox in the path appcodePHPCuong.
– Create the file named registration.php in the path appcodePHPCuongCustomerChatbox
– Create the file named module.xml in the path appcodePHPCuongCustomerChatboxetc
End of the step #1, I have been completed the steps to declare a new module.
Step 2: Create the system.xml file configuration in adminhtml
– Create the file named system.xml in the path appcodePHPCuongCustomerChatboxetcadminhtml
Step 3: Install the new module
Run the command line:
– php bin/magento setup:upgrade –keep-generated
Step 4: Create Helper Data for the new module
– Create the file named Data.php in the path appcodePHPCuongCustomerChatboxHelper
Step 5: Create the Facebook Messenger block
– Create the file named FacebookMessenger.php in the path appcodePHPCuongCustomerChatboxBlock
Step 6: Create the default layout
– Create the file named default.xml in the path appcodePHPCuongCustomerChatboxviewfrontendlayout
I put the FacebookMessenger block in the default.xml layout because I want it to display on all pages.
Step 7: Create the new template
– Create the file named messenger.phtml in the path appcodePHPCuongCustomerChatboxviewfrontendtemplatesfacebook
Step 8: Get the customer chat code from facebook
– Go to your fan page, navigate to the Settings → Messenger Platform → Whitelisted Domains, then add your domain and press the save button
– On the Customer Chat Plugin section, click “Set Up” and finish the steps, then get the customer chat code and move to the step #9
Step 9: Enable the Facebook Messenger and add the customer chat code.
Step 10: Test and see the results
Run the command line:
– php bin/magento cache:flush
It works perfectly.
In the next video, I will show you How to add the customer chat plugin of Tawk.to into Magento 2. This is another platform and it is quite free.
Thank you for your watching. If you have any questions about this exercise please feel free to leave a comment below.
Don’t forget to like, comment, share and subscribe to my channel for getting the latest videos.
Please do not hesitate to contact me if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2.
Get the source code of this tutorial in the Github