Get a branded pop chat window that suits your company’s needs.
You can customize with a color scheme of your choice with CSS. Another way of customization involves adding your company logo to the chat window. A number of social media buttons can also be added. You can add Facebook Like, Google +1 and Twitter Follow buttons for your visitors to click and access your social media pages.

Why FB Popup Chat?
User have the option to post comments directly to their Facebook profile page. FB Popup Chat can promote your site or blog even much better than any other chat plugin.

How to use? It's easy and simple to implement.
STEP ONE: Paste the code below above the </body> tag. This is the popup modal script.
  <script>
  $(document).ready(function(){/* off-canvas sidebar toggle */
  $('[data-toggle=offcanvas]').click(function() {
  $(this).toggleClass('visible-xs text-center');
  $(this).find('i').toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
  $('.row-offcanvas').toggleClass('active');
  $('#lg-menu').toggleClass('hidden-xs').toggleClass('visible-xs');
  $('#xs-menu').toggleClass('visible-xs').toggleClass('hidden-xs');
  $('#btnShow').toggle();
  });
  });
  </script>

STEP TWO: Now go and paste the Facebook Script right below the <body> tag.
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&amp;appId=235405909874502&amp;version=v2.0";
fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

STEP THREE: Lastly, copy paste the code below and place it after the footer or anywhere above the </body> tag.
 <!--post modal-->
  <div aria-hidden='true' class='modal fade' id='postModal' role='dialog' tabindex='-1'>
  <div class='modal-dialog'>
  <div class='modal-content'>
  <div class='modal-header'>
  <button aria-hidden='true' class='close' data-dismiss='modal' type='button'>&#215;</button>
  Kindly start the discussion!
  </div>
  <div class='modal-body'>
  <div class="fb-comments" data-href="http://strapboot.blogspot.com//" data-numposts="5" data-colorscheme="light"></div>
  </div> 
  <div class='modal-footer'><div>
  <ul class='pull-left list-inline'>
  <li><a href='http://strapboot.blogspot.com'><i class='fa fa-copyright'/></a></li>
  </ul>
  <ul class='pull-right list-inline'>
  <li><a href='http://strapboot.blogspot.com'><i class='fa fa-plug'/> Get this Chat</a></li>
  </ul>
  </div> 
  </div> 
  </div> 
  </div>
  </div>

It's not finish. You need to do three simple but important things. Change the Facebook App ID to yours in step two and change the URL "http://strapboot.blogspot.com" to your own URL.

Now add this chat Link anywhere in your site for the chat box to popup.
<a href='#postModal'>Chat with me!</a>


That's all!

Post a Comment