How to add Facebook Messenger for live chat on your website?

How to add facebook messenger in website so that users can chat live to your page?

Requirements:

  1. Page ID – you need to know what is your page id
  2. Whitelisted Domain – you need to add website on which you want show widget in your page’s whitelist
  3. Access to add/edit code in your website

1 – Getting Page ID

Go to your page, click on about, scroll down a bit and you will see Page ID

The url will look like https://www.facebook.com/pg/YOURPAGENAME/about/?ref=page_internal

The page id will look like

Alternatively, you can use tools like Find My Facebook ID – https://findmyfbid.com/

2 – Whitelisting your domain

There are 2 ways to do this, A and B both mentioned below

A) For Page Admins, the Messenger Platform also provides an easy setup tool for customizing your customer chat plugin. To use the setup tool, do the following:

  1. Go to Page Settings > Messenger Platform
  2. In the ‘Customer Chat Plugin’ section, click the ‘Set Up’ Button.

The url will look like https://www.facebook.com/YOURPAGEUSERNAME/settings/?tab=messenger_platform

OR

B) Go to Page Settings > Messenger Platform and Jump to Whitelisted Domains section

whitelist your website url

3 – Add Code in your website

Replace PAGEID with your page id obtained in step 1

HTML CODE (includes js code also)

<div id="fb-root"></div>
<div class="fb-customerchat" attribution="setup_tool" page_id="PAGEID" logged_in_greeting="Hi! How can I help you?" greeting_dialog_display="hide" logged_out_greeting="Hi! How can I help you?" theme_color="#0084ff">
</div>
<script>
  window.fbAsyncInit = function() {FB.init({xfbml: true,
version: 'v4.0'});};
(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>	  

Customization Notes:

Add or edit these common attribute value pairs

greeting_dialog_display="hide" 
theme_color="#0084ff"

Details about customization: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#customization

References:

https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin

How to remove sign in popup from Magento 2 checkout page?

Magento2 has this authentication pop up on checkout page, which many store owners wont like to see on their checkout page.

Background of this pop up area and Related files

The pop up itself is generated by Magento_Customer::account/authentication-popup.phtml

But this pop up works very differently on checkout page. In fact this is a separate pop up than the one you see in header area. It is embedded in a series of js files which are governed by knockout-js

Other file responsible is: vendor/magento/module-checkout/view/frontend/web/js/proceed-to-checkout.js

Here is how to remove it finally

Edit file or overload the file

app/design/frontend/YourVendor/YourTheme/Magento_Checkout/web/template/onepage.html

delete the following lines and save the file

<!-- ko foreach: getRegion('authentication') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

Reference:

https://github.com/magento/magento2/blob/2.2/app/code/Magento/Checkout/view/frontend/web/template/onepage.html

https://github.com/magento/magento2/blob/fc66fe443d87c4e69fe9022d7c95fe66e0565978/app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml#L39

How to customize Magento 2 Maintenance mode page?

Edit the file pub/errors/default/503.phtml and put the following code

<?php
/**
 * How to edit and customize code of Magento 2 Maintenance 503 Page
 * Add analytics if any
 * Replace <COMPANY NAME> with your Organization Name
 */
?>
<!doctype html>
<title>Site Maintenance</title>
<style>
  body { text-align: center; padding: 150px; }
  h1 { font-size: 50px; }
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 650px; margin: 0 auto; }
  a { color: #dc8100; text-decoration: none; }
  a:hover { color: #333; text-decoration: none; }
</style>

<article>
    <h1>We&rsquo;ll be back soon!</h1>
    <div>
        <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. If you need to you can always <a href="mailto:[email protected] NAME">contact us</a>, otherwise we&rsquo;ll be back online shortly!</p>
        <p>&mdash; Team COMPANY NAME</p>
    </div>
</article>