.flashybtn
{
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;
left: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{
from{
transform: translateX(0) skewX(-15deg);
opacity:1;
}
to {
transform: translateX(100vw) skewX(-15deg);
opacity:1;
}
}
Category: HTML
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:
- Page ID – you need to know what is your page id
- Whitelisted Domain – you need to add website on which you want show widget in your page’s whitelist
- 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:
- Go to Page Settings > Messenger Platform
- 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
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:
3 ways to put a webpage on 100% device width
<meta name="viewport" content="width=device-width, initial-scale=1">
overflow-x: auto;
body,html{max-width:100%}
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’ll be back soon!</h1>
<div>
<p>Sorry for the inconvenience but we’re performing some maintenance at the moment. If you need to you can always <a href="mailto:abcd@COMPANY NAME">contact us</a>, otherwise we’ll be back online shortly!</p>
<p>— Team COMPANY NAME</p>
</div>
</article>