Features<\/h3>\n<\/div>\n\n\n\n- Allow admin to enable or disable Facebook messenger chat.<\/li>\n
- Allow admin to set color theme of Facebook messenger chat.<\/li>\n
- The admin can set logged in greeting message of Facebook Messenger Chat.<\/li>\n
- Allow admin to set logged out greeting message of Facebook messenger chat.<\/li>\n
- A quick single tap activates the chat window.<\/li>\n
- Customers can send images, documents, file attachments in messages.<\/li>\n
- All the conversations are stored in Facebook Messenger.<\/li>\n
- Link to visit the End Chat, Turn Off Messages,\u00a0 Mute Conversation, Something’s Wrong, Visit Facebook Page, Add Messager To Your Website.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
Installation<\/h3>\n<\/div>\n<\/div>\n\n\nFollow the below steps for installing the extension \u2013<\/p>\n
First Step:<\/h3>\n
Unzip the respective extension zip and and then move \u201capp<\/strong>\u201d folder (inside \u201csrc<\/strong>\u201d folder) into magento root directory on the server.<\/p>\n![\"magento](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/webkul_magento2_facebook_messenger_installation.png\" "\\"magento")
<\/p>\n
Second Step:<\/h3>\n
Now, run the below-mentioned commands<\/strong> in the Magento 2 root directory<\/strong> via terminal<\/strong>.<\/p>\n1st Command\u00a0 –\u00a0 php bin\/magento setup:upgrade<\/strong><\/p>\n2nd Command –\u00a0 php bin\/magento setup:di:compile<\/strong><\/p>\n3rd Command\u00a0 –\u00a0 <\/strong>php bin\/magento setup:static-content:deploy<\/strong><\/p>\nThird Step:<\/strong><\/h3>\nLastly, flush the cache and re-index all by navigating through System->Cache management<\/strong>.
![\"Magento](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/07\/cache-management.png\" "\\"Magento")
<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\u00a0<\/h3>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nLanguage Translation<\/h3>\n<\/div><\/div>\n\n\n\n
For translating the module language, navigate through src\/app\/code\/Webkul\/FbMessengerChat<\/strong><\/strong>\/i18n<\/strong> and edit the en_US.csv file. Thereafter, rename the CSV as \u201cen_SA.csv\u201d and translate all right side content after the comma in the Arabic language. After editing the CSV, save it.<\/p>\n\n\n\n![\"Magento](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/i18folder-1200x293.png\")
<\/figure>\n\n\n\nNow, upload it to the path src\/app\/code\/Webkul\/FbMessengerChat\/i18n<\/strong> 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.<\/p>\n\n\n\nThe user can edit the CSV like the image below.<\/p>\n\n\n\n![\"Screenshot-from-2023-06-26-12-04-43\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Screenshot-from-2023-06-26-12-04-43.png\")
<\/figure>\n\n\n\nModule Configuration Settings<\/h3>\n<\/div>\n
After the successful installation of the extension, the admin will configure the module. Hence, to do so, navigate through Stores<\/strong>->Configuration<\/strong>->FB Messenger Chat<\/strong> Module.<\/p>\n\n\n![\"192.168.15.134_fbchat_pub_admin_admin_system_config_index_key_ce6c0d65573e0ce8d714f642fc9ddf9c0c4691b46cd80010c98b576140c60032_asd\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/192.168.15.134_fbchat_pub_admin_admin_system_config_index_key_ce6c0d65573e0ce8d714f642fc9ddf9c0c4691b46cd80010c98b576140c60032_asd.png\" "\\"Magento")
<\/p>\n
Here, the admin will –<\/p>\n
\n- Enable:
<\/strong>Select Yes<\/strong> to enable<\/strong> the extension else select No<\/strong> to disable<\/strong> it.<\/li>\n- FB Page Id<\/strong>:
The admin needs to enter the page ID<\/strong> of the page that the admin wants to integrate with the Magento 2 store.<\/li>\n- Logged In Greeting
<\/strong>Enter the greeting message that will get displayed on login.<\/li>\n- Logged Out Greeting
<\/strong>Enter the greeting message that will get displayed on logout.
<\/strong><\/li>\n- Theme Color
<\/strong>Choose the theme color for the messenger.
<\/strong><\/li>\n<\/ul>\n\nHow to Get the Facebook Page ID?<\/h3>\n<\/div>\n
The admin will login to his <\/span>Facebook<\/strong> account. Hereafter, <\/span>create<\/strong> a <\/span>new page<\/strong> or select an existing page by navigating to <\/span>Pages<\/strong> section.<\/span><\/p>\n<\/div>\n<\/div>\n\n\n\n![\"Facebook](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/www.facebook.com_profile.php_id_100088633069755_1120_80_.png\" "\\"go")
So, now, select the page<\/strong> for which the admin wants the page Id<\/strong>.<\/p>\n![\"Facebook](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/www.facebook.com_profile.php_id_100088633069755_1120_80___2_.png\" "\\"facebook")
Now, after reaching the required page navigate to its About<\/strong>.<\/p>\n![\"Facebook](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/www.facebook.com_profile.php_id_100088633069755_sk_about_1120_80_.png\" "\\"facebook")
<\/p>\n
However, here the admin will be able to find the Page ID<\/strong> under the Page Transparency <\/strong>settings.<\/p>\n![\"Facebook](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/www.facebook.com_profile.php_id_100088633069755_sk_about_profile_transparency_1120_80_.png\")
<\/p>\n
\nHow to Add Magento 2 Store to Your Facebook Page?<\/h3>\n<\/div>\n
To log in to your Facebook business account, tap <\/span>here<\/a>.\u00a0<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nAfter login, open the page settings by searching your business asset in the top left-hand corner.<\/p>\n
![\"2-6\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/2-6.png\")
<\/p>\n
After that, you can see the selected page and the settings for the same.\u00a0<\/p>\n
![\"business.facebook.com_latest_home_asset_id_104641995841179_business_id_3528408530723781_nav_ref_bm_home_redirect_1120_80_\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/business.facebook.com_latest_home_asset_id_104641995841179_business_id_3528408530723781_nav_ref_bm_home_redirect_1120_80_.png\")
<\/p>\n
Now go to the messages section and at the top tap the Cog<\/strong> icon to display the settings. Here, select the View All Settings<\/strong> option.\u00a0<\/p>\n![\"1-7\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/1-7.png\")
<\/p>\n
This brings up the settings and navigate to the messaging section to get the Messenger URL.<\/p>\n
![\"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_\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/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_.png\")
<\/p>\n
After this, navigate to messaging section and Set up option.<\/p>\n
![\"business.facebook.com_latest_inbox_settings_chat_plugin_asset_id_106679358799917_business_id_2141330932840988_nav_ref_bm_home_redirect_1120_80_\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/business.facebook.com_latest_inbox_settings_chat_plugin_asset_id_106679358799917_business_id_2141330932840988_nav_ref_bm_home_redirect_1120_80_.png\")
<\/p>\n
Now, <\/span>tap the<\/span> Setup <\/strong>button.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n![\"setup\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/Picture1-1.png\")
<\/p>\n<\/div>\n<\/div>\n
\n\nChoose the default Language. Thus, tap the Save & Continue <\/strong>button as per the below image.<\/p>\n![\"language](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/english.png\" "\\"set")
<\/p>\n
Henceforth, now, select Add Domain, <\/strong> to add the domain for all websites that you would like the Chat plugin to appear on, then Tap Save and Continue.<\/strong><\/p>\n![\"add](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/adddomain-1.png\" "\\"customer")
<\/h4>\n
After this, Copy the code by clicking\u00a0 Copy Code<\/strong> then click Next.<\/strong><\/p>\n![\"copy](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/copycode.png\" "\\"set")
<\/p>\n
So, we will be redirected to the final step tap Finish > Done.<\/strong><\/p>\n(Paste the code snippet directly after the opening <body> tag on each web page where you want the Chat plugin to appear).<\/strong><\/p>\n\n\n\n\n\u200b<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n![\"configuration\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/finish.png\" "\\"customer")
<\/p>\n
\nWorkflow – Store Frontend<\/h3>\n<\/div>\n
The customers will be able to see the messenger icon on the webstore frontend.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n![\"Messenger](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/frontend.png\" "\\"Messenger")
<\/p>\n
So, if the customer is not already logged<\/strong> into Facebook<\/strong> then he can see the “Log Into Messenger<\/strong>” button as shown below in the snapshot.<\/p>\n![\"without](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/notloggedin.png\" "\\"without")
Tapping the Log into Messenger<\/strong> button, a pop-up window will appear. Thus, allowing the customer to enter his email address<\/strong> and the password to continue.
![\"login](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/logindetails-.png\" "\\"login")
So, after login, the customer will be able to chat with the admin of the store as shown below in the snapshot.<\/p>\n![\"Magento](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/img11.png\" "\\"chatting")
<\/p>\n
Thus, apart from allowing the chat, it supports: Send Images, Documents, File Attachments<\/strong>.<\/p>\n![\"Magento](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/img12.png\")
<\/p>\n
\n\n\nInformation Icon<\/h3>\n<\/div>\n<\/div>\n\n\nHereafter, clicking on the Information Icon(i)<\/strong> on the top right-hand header<\/strong> of this chat window there area few options as shown below in the snapshot.<\/p>\n![\"store](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/01\/screenshot__6_.png\")
<\/p>\n
Here, we have few options to check –<\/p>\n
\n- End Chat:
<\/strong>Customers can end the chat from their side.<\/li>\n- Turn On\/Off Messages<\/strong>:
Turning this option to On<\/strong> will allow the message transmission. However, setting it as No<\/strong> stops message transmission.<\/li>\n- Mute Conversation<\/strong>:
If this option is enabled<\/strong> then the customer will be able to mute the conversations.<\/li>\n- Something’s<\/strong> Wrong:<\/strong>
Customers can report any spam or a problem that they face.<\/li>\n- Visit Facebook Page<\/strong>:
Clicking on this option will redirect to the Facebook page for which configuration has been made.<\/li>\n- Add Messenger to Your Website<\/strong>:
Redirects to the “Add Messenger to your website<\/strong><\/a>” page. Thereafter, here you can know how the messenger works.<\/li>\n<\/ol>\nSo, that’s all for the Magento 2 Facebook Messenger Chat extension. Still, have issues, get back to us at support@webkul.com <\/span>or send in a ticket at webkul.uvdesk.com<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"
- \n
- Allow admin to enable or disable Facebook messenger chat.<\/li>\n
- Allow admin to set color theme of Facebook messenger chat.<\/li>\n
- The admin can set logged in greeting message of Facebook Messenger Chat.<\/li>\n
- Allow admin to set logged out greeting message of Facebook messenger chat.<\/li>\n
- A quick single tap activates the chat window.<\/li>\n
- Customers can send images, documents, file attachments in messages.<\/li>\n
- All the conversations are stored in Facebook Messenger.<\/li>\n
- Link to visit the End Chat, Turn Off Messages,\u00a0 Mute Conversation, Something’s Wrong, Visit Facebook Page, Add Messager To Your Website.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
Installation<\/h3>\n<\/div>\n<\/div>\n
\n\nFollow the below steps for installing the extension \u2013<\/p>\n
First Step:<\/h3>\n
Unzip the respective extension zip and and then move \u201capp<\/strong>\u201d folder (inside \u201csrc<\/strong>\u201d folder) into magento root directory on the server.<\/p>\n
<\/p>\nSecond Step:<\/h3>\n
Now, run the below-mentioned commands<\/strong> in the Magento 2 root directory<\/strong> via terminal<\/strong>.<\/p>\n
1st Command\u00a0 –\u00a0 php bin\/magento setup:upgrade<\/strong><\/p>\n
2nd Command –\u00a0 php bin\/magento setup:di:compile<\/strong><\/p>\n
3rd Command\u00a0 –\u00a0 <\/strong>php bin\/magento setup:static-content:deploy<\/strong><\/p>\n
Third Step:<\/strong><\/h3>\n
Lastly, flush the cache and re-index all by navigating through System->Cache management<\/strong>.
<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\u00a0<\/h3>\n<\/div>\n<\/div>\n<\/div>\n\n\n
\nLanguage Translation<\/h3>\n<\/div><\/div>\n\n\n\n
For translating the module language, navigate through src\/app\/code\/Webkul\/FbMessengerChat<\/strong><\/strong>\/i18n<\/strong> and edit the en_US.csv file. Thereafter, rename the CSV as \u201cen_SA.csv\u201d and translate all right side content after the comma in the Arabic language. After editing the CSV, save it.<\/p>\n\n\n\n
<\/figure>\n\n\n\nNow, upload it to the path src\/app\/code\/Webkul\/FbMessengerChat\/i18n<\/strong> 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.<\/p>\n\n\n\n
The user can edit the CSV like the image below.<\/p>\n\n\n\n
<\/figure>\n\n\n\nModule Configuration Settings<\/h3>\n<\/div>\n
After the successful installation of the extension, the admin will configure the module. Hence, to do so, navigate through Stores<\/strong>->Configuration<\/strong>->FB Messenger Chat<\/strong> Module.<\/p>\n
\n\n<\/p>\nHere, the admin will –<\/p>\n
- \n
- Enable:
<\/strong>Select Yes<\/strong> to enable<\/strong> the extension else select No<\/strong> to disable<\/strong> it.<\/li>\n- FB Page Id<\/strong>:
The admin needs to enter the page ID<\/strong> of the page that the admin wants to integrate with the Magento 2 store.<\/li>\n- Logged In Greeting
<\/strong>Enter the greeting message that will get displayed on login.<\/li>\n- Logged Out Greeting
<\/strong>Enter the greeting message that will get displayed on logout.
<\/strong><\/li>\n- Theme Color
<\/strong>Choose the theme color for the messenger.
<\/strong><\/li>\n<\/ul>\n\nHow to Get the Facebook Page ID?<\/h3>\n<\/div>\n
The admin will login to his <\/span>Facebook<\/strong> account. Hereafter, <\/span>create<\/strong> a <\/span>new page<\/strong> or select an existing page by navigating to <\/span>Pages<\/strong> section.<\/span><\/p>\n<\/div>\n<\/div>\n
\n\n\n
So, now, select the page<\/strong> for which the admin wants the page Id<\/strong>.<\/p>\nNow, after reaching the required page navigate to its About<\/strong>.<\/p>\n<\/p>\nHowever, here the admin will be able to find the Page ID<\/strong> under the Page Transparency <\/strong>settings.<\/p>\n
<\/p>\n\nHow to Add Magento 2 Store to Your Facebook Page?<\/h3>\n<\/div>\n
To log in to your Facebook business account, tap <\/span>here<\/a>.\u00a0<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n\n\nAfter login, open the page settings by searching your business asset in the top left-hand corner.<\/p>\n
<\/p>\nAfter that, you can see the selected page and the settings for the same.\u00a0<\/p>\n
<\/p>\nNow go to the messages section and at the top tap the Cog<\/strong> icon to display the settings. Here, select the View All Settings<\/strong> option.\u00a0<\/p>\n
<\/p>\nThis brings up the settings and navigate to the messaging section to get the Messenger URL.<\/p>\n
<\/p>\nAfter this, navigate to messaging section and Set up option.<\/p>\n
<\/p>\nNow, <\/span>tap the<\/span> Setup <\/strong>button.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n\n\n<\/p>\n<\/div>\n<\/div>\n\n\nChoose the default Language. Thus, tap the Save & Continue <\/strong>button as per the below image.<\/p>\n
<\/p>\nHenceforth, now, select Add Domain, <\/strong> to add the domain for all websites that you would like the Chat plugin to appear on, then Tap Save and Continue.<\/strong><\/p>\n
<\/h4>\nAfter this, Copy the code by clicking\u00a0 Copy Code<\/strong> then click Next.<\/strong><\/p>\n
<\/p>\nSo, we will be redirected to the final step tap Finish > Done.<\/strong><\/p>\n
(Paste the code snippet directly after the opening <body> tag on each web page where you want the Chat plugin to appear).<\/strong><\/p>\n
\n\n\n\n\u200b<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/p>\n\nWorkflow – Store Frontend<\/h3>\n<\/div>\n
The customers will be able to see the messenger icon on the webstore frontend.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n\n\n<\/p>\nSo, if the customer is not already logged<\/strong> into Facebook<\/strong> then he can see the “Log Into Messenger<\/strong>” button as shown below in the snapshot.<\/p>\n
Tapping the Log into Messenger<\/strong> button, a pop-up window will appear. Thus, allowing the customer to enter his email address<\/strong> and the password to continue.
So, after login, the customer will be able to chat with the admin of the store as shown below in the snapshot.<\/p>\n<\/p>\nThus, apart from allowing the chat, it supports: Send Images, Documents, File Attachments<\/strong>.<\/p>\n
<\/p>\n\n\n\nInformation Icon<\/h3>\n<\/div>\n<\/div>\n
\n\nHereafter, clicking on the Information Icon(i)<\/strong> on the top right-hand header<\/strong> of this chat window there area few options as shown below in the snapshot.<\/p>\n
<\/p>\nHere, we have few options to check –<\/p>\n
- \n
- End Chat:
<\/strong>Customers can end the chat from their side.<\/li>\n- Turn On\/Off Messages<\/strong>:
Turning this option to On<\/strong> will allow the message transmission. However, setting it as No<\/strong> stops message transmission.<\/li>\n- Mute Conversation<\/strong>:
If this option is enabled<\/strong> then the customer will be able to mute the conversations.<\/li>\n- Something’s<\/strong> Wrong:<\/strong>
Customers can report any spam or a problem that they face.<\/li>\n- Visit Facebook Page<\/strong>:
Clicking on this option will redirect to the Facebook page for which configuration has been made.<\/li>\n- Add Messenger to Your Website<\/strong>:
Redirects to the “Add Messenger to your website<\/strong><\/a>” page. Thereafter, here you can know how the messenger works.<\/li>\n<\/ol>\nSo, that’s all for the Magento 2 Facebook Messenger Chat extension. Still, have issues, get back to us at support@webkul.com <\/span>or send in a ticket at webkul.uvdesk.com<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"
- Turn On\/Off Messages<\/strong>:
- FB Page Id<\/strong>:
- Enable: