CSS Flashy button with glaze effect

    display: block;
    text-align: center!important;
    text-decoration: none!important;
    font-weight: 800!important;
    font-size: 1.5em;
    text-transform: uppercase!important;
    color: #fff!important;
    padding: 1em 0.1em 1em 0.1em!important;
    background-size: 200% auto!important;
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)!important;
    background-image: linear-gradient(to right,#ff473d 0%,#ff379d 50%,#f13790 100%)!important;
    animation: gradient 1.5s ease infinite!important;
    width: 100%;
    position: relative; //change to fixed to make it sticky
    bottom: 0;
    z-index: 9999;
.flashybtn:before {
    content: "";
    display: inline-block;
    position: absolute;
    background: rgb(255,255,255);
    width: 30px;
    height: 2em;
    left: 0;
    bottom: 0;
    filter: blur(1.5em);
    animation: 2s glaze infinite;
@keyframes glaze{
        transform: translateX(0) skewX(-15deg);
    to {
        transform: translateX(100vw) skewX(-15deg);


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?


  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


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">
  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'));

Customization Notes:

Add or edit these common attribute value pairs


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



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


delete the following lines and save the file

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




How to customize Magento 2 Maintenance mode page?

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

 * 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>
  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; }

    <h1>We&rsquo;ll be back soon!</h1>
        <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>