Live Chat:How to using bootstrap/JQuery

Live Chat - Bootstrap/Jquery


We make use of the font-awesome cdn and Jquery for our implementation. So make sure you have the icons available. We have a native implementation documented here. It is also best to have the Jquery Javascript files in place or use native javascript in place of the Jquery functions. Then the following css and Javascript will accompish the tasks of creating the bubble and link to our app. We are in favor of customizing this code to look and feel you want.

A gentle reminder. You will have to contact us with your domain for it to work. There will be no charge for 30 days.

The html...



 <button class="bubble" id="button-modal">
   <i class="fa fa-comment bot-icon-sizeL"<>/i>
 </button>
        
        
the css...

.bubble{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#0C9;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
}
 
optionally...
 
    .bubble-icon-sizeL {
     font-size: 200%;
  }
 
and the js...

$( "#button-modal" ).click(function() {
 $('#button-modal').hide();
 $.get( "https://appliedscience.com/
 Server-Code/Home/getipcrunch",
  function( data ) {
               
window.location ="https://webmail
.appliedscience.com/Server-Code/Home/
loadchat?phone=IP"+data
 });
          
});
        


Good luck! Happy codes...