"Chat Widget"
Bootstrap 3.0.0 Snippet by cristian

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="jquery.js"></script> <link type="text/css" href="estilo.css" rel="stylesheet"></link> <link href="css/bootstrap.min.css" rel="stylesheet" > <link href="css/bootstrap-theme.min.css" rel="stylesheet" > <link href="js/bootstrap.min.js" rel="stylesheet" > <link href="js/bootstrap.js" rel="stylesheet" > </head> <body> <script type="text/javascript"> $(document).ready(function(){ alert("funcionando"); }); </script> <div class="container"> <div class="row"> <div class="col-md-5"> <div class="panel panel-primary"> <div class="panel-heading"> <span class="glyphicon glyphicon-comment"></span> Chat 2 <div class="btn-group pull-right"> <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-chevron-down"></span> </button> <ul class="dropdown-menu slidedown"> <li>salir</li> <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-refresh"> </span>Actualizar</a></li> <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-ok-sign"> </span>Available</a></li> <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-remove"> </span>Busy</a></li> <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-time"></span> Away</a></li> <li class="divider"></li> <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-off"></span> Desconectarse</a></li> </ul> </div> </div> <div class="panel-body"> <ul class="chat"> </ul> </div> <div class="panel-footer"> <div class="input-group"> <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." /> <span class="input-group-btn"> <button class="btn btn-warning btn-sm" id="btn-chat"> Send</button> </span> </div> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $("#btn-chat").click(function(){ var d = new Date(); var m = d.getMonth() + 1; var mes = (m < 10) ? '0' + m : m; var dato = $("#btn-input").val(); var fec =d.getFullYear()+'-'+mes+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds(); var nom = 'cristian'; if($("#btn-input").val()!=""){ $.ajax({ url: "receive.php", type: "POST", data: { mensaje: dato, fecha: fec, nombre: nom }, dataType: "html", success : function(data){ $(".chat").append("<li class='right clearfix'><span class='chat-img pull-right'><img src='http://placehold.it/50/FA6F57/fff&text=ME' alt='User Avatar' class='img-circle'/></span><small class=' text-muted'><span class='glyphicon glyphicon-time'></span>"+fec+"</small><strong class='pull-right primary-font'>"+nom+" </strong><br><p>"+dato+"</p></li>"); } }); $("#btn-input").val(""); } }); $.ajax({ url: "consulta.php", type: "POST", dataType: "json", success : function(data){ $.each(data,function(index, value){ console.log(value); var nom_consulta=value.nom; console.log(value.fec); var fec_consulta=value.fec console.log(value.tex); var tex_consulta=value.tex; $(".chat").append("<li class='right clearfix'><span class='chat-img pull-right'><img src='http://placehold.it/50/FA6F57/fff&text=ME' alt='User Avatar' class='img-circle'/></span><small class=' text-muted'><span class='glyphicon glyphicon-time'></span>"+fec_consulta+"</small><strong class='pull-right primary-font'>"+nom_consulta+" </strong><br><p>"+tex_consulta+"</p></li>"); }); } }); }); $(document).keypress(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); if(keycode == '13') { $("#btn-chat").click(); } }); </script> </body> </html>
.chat { list-style: none; margin: 0; padding: 0; } .chat li { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dotted #B3A9A9; } .chat li.left .chat-body { margin-left: 60px; } .chat li.right .chat-body { margin-right: 60px; } .chat li .chat-body p { margin: 0; color: #777777; } .panel .slidedown .glyphicon, .chat .glyphicon { margin-right: 5px; } .panel-body { overflow-y: scroll; height: 250px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } ::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; }

Related: See More

Vue Now UI Kit
Message Chat Box
Elegant Bootstrap 4 message chat box template
Open in chat (popup-box chat-popup)

Questions / Comments:

Hi Christian. Can you please send the php(receive.php / consulta.php) files to my mail ?
unusyansona@gmail.com

Sona Unusyan () - 7 years ago - Reply 0

Hi! Cristian!

you have examples of files (receive.php / consulta.php) to send to my email?
imasterdesign@imasterdesign.com.br

Marcelo Rocha () - 8 years ago - Reply 0