How to Add facebook live Chat in your Website

Written by July 27, 2017

Everyone now a days uses Facebook for different purposes like brand pages some personal blog pages , some company pages with High Rank with good response rate.

So, Im sharing code with enables you to share embed a Facebook Messenger Code to your website so that they can easily contact with you easily and you will get message or need to resolve an issue, can initiate a conversation with the simple click of a button and contact directly to your Facebook fan page.

The only downside with embedded buttons is that visitors will have to exit your website to send a message through Facebook Messenger. Wouldn’t it be nice if people could stay on your website and yet be able to message you through Facebook?

Well it is now possible with the help of facebook chat you can see (demo) and can contact me right through there.

image

The widget sits in the corner of your page and when someone clicks the Facebook Messenger icon, a non-intrusive chat window pops up where visitors can type and send you a private message.

Here’s a live demo of the Facebook chat widget.

EMBED FACEBOOK CHAT WIDGET for website

So i wrote a script that let you do this in just by copy paste.

All you to do is copy-paste the simple piece of code below anywhere in your website template and it will add the widget to all your pages. Remember to replace sarmadgardezi with the vanity URL (name) of your own Facebook page.

<style>.fb-livechat,.fb-widget{display:none}.ctrlq.fb-button,.ctrlq.fb-close{position:fixed;right:24px;cursor:pointer}.ctrlq.fb-button{z-index:1;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;width:60px;height:60px;text-align:center;bottom:24px;border:0;outline:0;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);-webkit-transition:box-shadow .2s ease;background-size:80%;transition:all .2s ease-in-out}.ctrlq.fb-button:focus,.ctrlq.fb-button:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.09),0 4px 40px rgba(0,0,0,.24)}.fb-widget{background:#fff;z-index:2;position:fixed;width:360px;height:435px;overflow:hidden;opacity:0;bottom:0;right:24px;border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;box-shadow:0 5px 40px rgba(0,0,0,.16);-webkit-box-shadow:0 5px 40px rgba(0,0,0,.16);-moz-box-shadow:0 5px 40px rgba(0,0,0,.16);-o-box-shadow:0 5px 40px rgba(0,0,0,.16)}.fb-credit{text-align:center;margin-top:8px}.fb-credit a{transition:none;color:#bec2c9;font-family:Helvetica,Arial,sans-serif;font-size:12px;text-decoration:none;border:0;font-weight:400}.ctrlq.fb-overlay{z-index:0;position:fixed;height:100vh;width:100vw;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;top:0;left:0;background:rgba(0,0,0,.05);display:none}.ctrlq.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.ctrlq.fb-close::after{content:'x';font-family:sans-serif}</style>

<div class="fb-livechat">
<div class="ctrlq fb-overlay"></div>
<div class="fb-widget">
<div class="ctrlq fb-close"></div>
<div class="fb-page" data-href="https://www.facebook.com/sarmadgardezi/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false">
<blockquote cite="https://www.facebook.com/sarmadgardezi/" class="fb-xfbml-parse-ignore"> </blockquote>
</div>
<div class="fb-credit">
<a href="http://sarmadgardezi.com" target="_blank">Facebook Chat Widget by Sarmad gardezi </a>
</div>
<div id="fb-root"></div>
</div>
<a href="https://m.me/sarmadgardezi" title="Send us a message on Facebook" class="ctrlq fb-button"></a>
</div>

<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>$(document).ready(function(){var t={delay:125,overlay:$(".fb-overlay"),widget:$(".fb-widget"),button:$(".fb-button")};setTimeout(function(){$("div.fb-livechat").fadeIn()},8*t.delay),$(".ctrlq").on("click",function(e){e.preventDefault(),t.overlay.is(":visible")?(t.overlay.fadeOut(t.delay),t.widget.stop().animate({bottom:0,opacity:0},2*t.delay,function(){$(this).hide("slow"),t.button.show()})):

t.button.fadeOut("medium",function(){t.widget.stop().show().animate({bottom:"30px",opacity:1},2*t.delay),t.overlay.fadeIn(t.delay)})})});</script>

The widget would work across all sorts of websites including Blogger & WordPress blogs, WooCommerce stores, and most static HTML websites. It would however not work with the new version of Google Sites as they do not offer an option to embed JavaScript in pages.

When visitors send a message via the Facebook Chat widget, it goes right to the inbox of your Facebook Page. As the business owner, you can install the Facebook Pages Manager app on your mobile phone to view and respond to messages.  The customer will be notified of your response inside their Facebook Messenger app.

The message history is preserved forever, there’s no limit on the number of messages you can receive in a day and your page can simultaneously receive pages from multiple visitors.  The widget also invites the visitor to like your Facebook Page.

You can also add facebook auto bot replies for instant message replies to activate then go to

  • Facebook page settings
  • open the message option from right sidebar
  • click on instead replies & select the time
  • just type your reply you can also use some buildin features
  • All done save the settings

Now when someone message you your page will make an auto reply and inform you when you visit your facebook age inbox section.

One more thing. If the web page is using an ad blocker or if they have disabled social plugins, the widget nicely defaults to the messenger button.


Free Online Image Hosting

Host your Images Online for free & use them on Website Blogs and Social Media.

Host Image Now Featured
Online Dictator

Convert your Speech into Text. You can either copy, Download or Share it Online for free.

Try it Now Popular
My First Tweet

Find first tweet on Twitter and retweet it to amaze people.

Lets Go! Trending

           
           

Subscribe to my Email Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 26,908 other subscribers
           
       
Custom Support

I build bespoke solutions that use the capabilities and the features of Google Apps for automating business processes and driving business productivity.

or send me a message via Facebook Messenger