This tutorial is useful for those who want to make their own chat system in the website. We can easily get the code to make a chat system but the only painful thing is always the UI i.e the design of chat box. In this tutorial, we will make a chatbox popup which will have a nice look. The popup will open in the right bottom corner of screen.

Follow these steps to make a chatbox using jquery and bootstrap:

Step 1

Add the defualt jquery and bootstrap files to the <head> tag

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Step 2

Now add the styling to the <head> tag. Following css will make the popup box looks good. Add this to your page

<style type="text/css">
 @import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
 @import url(https://fonts.googleapis.com/css?family=Open+Sans);
 body
 {
    font-family: 'Open Sans', sans-serif;
    }
 .popup-box {
    background-color: #ffffff;
     border: 1px solid #b0b0b0;
     bottom: 0;
     display: none;
     height: 415px;
     position: fixed;
     right: 70px;
     width: 300px;
     font-family: 'Open Sans', sans-serif;
 }
 .round.hollow {
     margin: 40px 0 0;
 }
 .round.hollow a {
     border: 2px solid #ff6701;
     border-radius: 35px;
     color: red;
     color: #ff6701;
     font-size: 23px;
     padding: 10px 21px;
     text-decoration: none;
     font-family: 'Open Sans', sans-serif;
 }
 .round.hollow a:hover {
     border: 2px solid #000;
     border-radius: 35px;
     color: red;
     color: #000;
     font-size: 23px;
     padding: 10px 21px;
     text-decoration: none;
 }
 .popup-box-on {
     display: block !important;
 }
 .popup-box .popup-head {
     background-color: #fff;
     clear: both;
     color: #7b7b7b;
     display: inline-table;
     font-size: 21px;
     padding: 7px 10px;
     width: 100%;
      font-family: Oswald;
 }
 .bg_none i {
     border: 1px solid #ff6701;
     border-radius: 25px;
     color: #ff6701;
     font-size: 17px;
     height: 33px;
     line-height: 30px;
     width: 33px;
 }
 .bg_none:hover i {
     border: 1px solid #000;
     border-radius: 25px;
     color: #000;
     font-size: 17px;
     height: 33px;
     line-height: 30px;
     width: 33px;
 }
 .bg_none {
     background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
     border: medium none;
 }
 .popup-box .popup-head .popup-head-right {
     margin: 11px 7px 0;
 }
 .popup-box .popup-messages {
 }
 .popup-head-left img {
     border: 1px solid #7b7b7b;
     border-radius: 50%;
     width: 44px;
 }
 .popup-messages-footer > textarea {
     border-bottom: 1px solid #b2b2b2 !important;
     height: 34px !important;
     margin: 7px;
     padding: 5px !important;
      border: medium none;
     width: 95% !important;
 }
 .popup-messages-footer {
     background: #fff none repeat scroll 0 0;
     bottom: 0;
     position: absolute;
     width: 100%;
 }
 .popup-messages-footer .btn-footer {
     overflow: hidden;
     padding: 2px 5px 10px 6px;
     width: 100%;
 }
 .simple_round {
     background: #d1d1d1 none repeat scroll 0 0;
     border-radius: 50%;
     color: #4b4b4b !important;
     height: 21px;
     padding: 0 0 0 1px;
     width: 21px;
 }





 .popup-box .popup-messages {
     background: #3f9684 none repeat scroll 0 0;
     height: 275px;
     overflow: auto;
 }
 .direct-chat-messages {
     overflow: auto;
     padding: 10px;
     transform: translate(0px, 0px);
     
 }
 .popup-messages .chat-box-single-line {
     border-bottom: 1px solid #a4c6b5;
     height: 12px;
     margin: 7px 0 20px;
     position: relative;
     text-align: center;
 }
 .popup-messages abbr.timestamp {
     background: #3f9684 none repeat scroll 0 0;
     color: #fff;
     padding: 0 11px;
 }

 .popup-head-right .btn-group {
     display: inline-flex;
  margin: 0 8px 0 0;
  vertical-align: top !important;
 }
 .chat-header-button {
     background: transparent none repeat scroll 0 0;
     border: 1px solid #636364;
     border-radius: 50%;
     font-size: 14px;
     height: 30px;
     width: 30px;
 }
 .popup-head-right .btn-group .dropdown-menu {
     border: medium none;
     min-width: 122px;
  padding: 0;
 }
 .popup-head-right .btn-group .dropdown-menu li a {
     font-size: 12px;
     padding: 3px 10px;
  color: #303030;
 }

 .popup-messages abbr.timestamp {
     background: #3f9684  none repeat scroll 0 0;
     color: #fff;
     padding: 0 11px;
 }
 .popup-messages .chat-box-single-line {
     border-bottom: 1px solid #a4c6b5;
     height: 12px;
     margin: 7px 0 20px;
     position: relative;
     text-align: center;
 }
 .popup-messages .direct-chat-messages {
     height: auto;
 }
 .popup-messages .direct-chat-text {
     background: #dfece7 none repeat scroll 0 0;
     border: 1px solid #dfece7;
     border-radius: 2px;
     color: #1f2121;
 }

 .popup-messages .direct-chat-timestamp {
     color: #fff;
     opacity: 0.6;
 }

 .popup-messages .direct-chat-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 0 49px !important;
  color: #fff;
  opacity: 0.9;
 }
 .popup-messages .direct-chat-info {
     display: block;
     font-size: 12px;
     margin-bottom: 0;
 }
 .popup-messages  .big-round {
     margin: -9px 0 0 !important;
 }
 .popup-messages  .direct-chat-img {
     border: 1px solid #fff;
  background: #3f9684  none repeat scroll 0 0;
     border-radius: 50%;
     float: left;
     height: 40px;
     margin: -21px 0 0;
     width: 40px;
 }
 .direct-chat-reply-name {
     color: #fff;
     font-size: 15px;
     margin: 0 0 0 10px;
     opacity: 0.9;
 }

 .direct-chat-img-reply-small
 {
     border: 1px solid #fff;
     border-radius: 50%;
     float: left;
     height: 20px;
     margin: 0 8px;
     width: 20px;
  background:#3f9684;
 }

 .popup-messages .direct-chat-msg {
     margin-bottom: 10px;
     position: relative;
 }

 .popup-messages .doted-border::after {
  background: transparent none repeat scroll 0 0 !important;
     border-right: 2px dotted #fff !important;
  bottom: 0;
     content: "";
     left: 17px;
     margin: 0;
     position: absolute;
     top: 0;
     width: 2px;
   display: inline;
    z-index: -2;
 }

 .popup-messages .direct-chat-msg::after {
     background: #fff none repeat scroll 0 0;
     border-right: medium none;
     bottom: 0;
     content: "";
     left: 17px;
     margin: 0;
     position: absolute;
     top: 0;
     width: 2px;
   display: inline;
    z-index: -2;
 }
 .direct-chat-text::after, .direct-chat-text::before {
    
     border-color: transparent #dfece7 transparent transparent;
     
 }
 .direct-chat-text::after, .direct-chat-text::before {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     border-color: transparent #d2d6de transparent transparent;
     border-image: none;
     border-style: solid;
     border-width: medium;
     content: " ";
     height: 0;
     pointer-events: none;
     position: absolute;
     right: 100%;
     top: 15px;
     width: 0;
 }
 .direct-chat-text::after {
     border-width: 5px;
     margin-top: -5px;
 }
 .popup-messages .direct-chat-text {
     background: #dfece7 none repeat scroll 0 0;
     border: 1px solid #dfece7;
     border-radius: 2px;
     color: #1f2121;
 }
 .direct-chat-text {
     background: #d2d6de none repeat scroll 0 0;
     border: 1px solid #d2d6de;
     border-radius: 5px;
     color: #444;
     margin: 5px 0 0 50px;
     padding: 5px 10px;
     position: relative;
 }
 </style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body

{

font-family: 'Open Sans', sans-serif;

}

.popup-box {

background-color: #ffffff;

border: 1px solid #b0b0b0;

bottom: 0;

display: none;

height: 415px;

position: fixed;

right: 70px;

width: 300px;

font-family: 'Open Sans', sans-serif;

}

.round.hollow {

margin: 40px 0 0;

}

.round.hollow a {

border: 2px solid #ff6701;

border-radius: 35px;

color: red;

color: #ff6701;

font-size: 23px;

padding: 10px 21px;

text-decoration: none;

font-family: 'Open Sans', sans-serif;

}

.round.hollow a:hover {

border: 2px solid #000;

border-radius: 35px;

color: red;

color: #000;

font-size: 23px;

padding: 10px 21px;

text-decoration: none;

}

.popup-box-on {

display: block !important;

}

.popup-box .popup-head {

background-color: #fff;

clear: both;

color: #7b7b7b;

display: inline-table;

font-size: 21px;

padding: 7px 10px;

width: 100%;

font-family: Oswald;

}

.bg_none i {

border: 1px solid #ff6701;

border-radius: 25px;

color: #ff6701;

font-size: 17px;

height: 33px;

line-height: 30px;

width: 33px;

}

.bg_none:hover i {

border: 1px solid #000;

border-radius: 25px;

color: #000;

font-size: 17px;

height: 33px;

line-height: 30px;

width: 33px;

}

.bg_none {

background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

border: medium none;

}

.popup-box .popup-head .popup-head-right {

margin: 11px 7px 0;

}

.popup-box .popup-messages {

}

.popup-head-left img {

border: 1px solid #7b7b7b;

border-radius: 50%;

width: 44px;

}

.popup-messages-footer > textarea {

border-bottom: 1px solid #b2b2b2 !important;

height: 34px !important;

margin: 7px;

padding: 5px !important;

border: medium none;

width: 95% !important;

}

.popup-messages-footer {

background: #fff none repeat scroll 0 0;

bottom: 0;

position: absolute;

width: 100%;

}

.popup-messages-footer .btn-footer {

overflow: hidden;

padding: 2px 5px 10px 6px;

width: 100%;

}

.simple_round {

background: #d1d1d1 none repeat scroll 0 0;

border-radius: 50%;

color: #4b4b4b !important;

height: 21px;

padding: 0 0 0 1px;

width: 21px;

}

.popup-box .popup-messages {

background: #3f9684 none repeat scroll 0 0;

height: 275px;

overflow: auto;

}

.direct-chat-messages {

overflow: auto;

padding: 10px;

transform: translate(0px, 0px);

}

.popup-messages .chat-box-single-line {

border-bottom: 1px solid #a4c6b5;

height: 12px;

margin: 7px 0 20px;

position: relative;

text-align: center;

}

.popup-messages abbr.timestamp {

background: #3f9684 none repeat scroll 0 0;

color: #fff;

padding: 0 11px;

}

.popup-head-right .btn-group {

display: inline-flex;

margin: 0 8px 0 0;

vertical-align: top !important;

}

.chat-header-button {

background: transparent none repeat scroll 0 0;

border: 1px solid #636364;

border-radius: 50%;

font-size: 14px;

height: 30px;

width: 30px;

}

.popup-head-right .btn-group .dropdown-menu {

border: medium none;

min-width: 122px;

padding: 0;

}

.popup-head-right .btn-group .dropdown-menu li a {

font-size: 12px;

padding: 3px 10px;

color: #303030;

}

.popup-messages abbr.timestamp {

background: #3f9684 none repeat scroll 0 0;

color: #fff;

padding: 0 11px;

}

.popup-messages .chat-box-single-line {

border-bottom: 1px solid #a4c6b5;

height: 12px;

margin: 7px 0 20px;

position: relative;

text-align: center;

}

.popup-messages .direct-chat-messages {

height: auto;

}

.popup-messages .direct-chat-text {

background: #dfece7 none repeat scroll 0 0;

border: 1px solid #dfece7;

border-radius: 2px;

color: #1f2121;

}

.popup-messages .direct-chat-timestamp {

color: #fff;

opacity: 0.6;

}

.popup-messages .direct-chat-name {

font-size: 15px;

font-weight: 600;

margin: 0 0 0 49px !important;

color: #fff;

opacity: 0.9;

}

.popup-messages .direct-chat-info {

display: block;

font-size: 12px;

margin-bottom: 0;

}

.popup-messages .big-round {

margin: -9px 0 0 !important;

}

.popup-messages .direct-chat-img {

border: 1px solid #fff;

background: #3f9684 none repeat scroll 0 0;

border-radius: 50%;

float: left;

height: 40px;

margin: -21px 0 0;

width: 40px;

}

.direct-chat-reply-name {

color: #fff;

font-size: 15px;

margin: 0 0 0 10px;

opacity: 0.9;

}

.direct-chat-img-reply-small

{

border: 1px solid #fff;

border-radius: 50%;

float: left;

height: 20px;

margin: 0 8px;

width: 20px;

background:#3f9684;

}

.popup-messages .direct-chat-msg {

margin-bottom: 10px;

position: relative;

}

.popup-messages .doted-border::after {

background: transparent none repeat scroll 0 0 !important;

border-right: 2px dotted #fff !important;

bottom: 0;

content: "";

left: 17px;

margin: 0;

position: absolute;

top: 0;

width: 2px;

display: inline;

z-index: -2;

}

.popup-messages .direct-chat-msg::after {

background: #fff none repeat scroll 0 0;

border-right: medium none;

bottom: 0;

content: "";

left: 17px;

margin: 0;

position: absolute;

top: 0;

width: 2px;

display: inline;

z-index: -2;

}

.direct-chat-text::after, .direct-chat-text::before {

border-color: transparent #dfece7 transparent transparent;

}

.direct-chat-text::after, .direct-chat-text::before {

-moz-border-bottom-colors: none;

-moz-border-left-colors: none;

-moz-border-right-colors: none;

-moz-border-top-colors: none;

border-color: transparent #d2d6de transparent transparent;

border-image: none;

border-style: solid;

border-width: medium;

content: " ";

height: 0;

pointer-events: none;

position: absolute;

right: 100%;

top: 15px;

width: 0;

}

.direct-chat-text::after {

border-width: 5px;

margin-top: -5px;

}

.popup-messages .direct-chat-text {

background: #dfece7 none repeat scroll 0 0;

border: 1px solid #dfece7;

border-radius: 2px;

color: #1f2121;

}

.direct-chat-text {

background: #d2d6de none repeat scroll 0 0;

border: 1px solid #d2d6de;

border-radius: 5px;

color: #444;

margin: 5px 0 0 50px;

padding: 5px 10px;

position: relative;

}

</style>

Step 3

Now add some jQuery code to open the chat box.

<script type="text/javascript">
   $(function(){
  $("#addClass").click(function () {
          $('#qnimate').addClass('popup-box-on');
            });
            $("#removeClass").click(function () {
          $('#qnimate').removeClass('popup-box-on');
        });
 })
</script>

$(function(){

$("#addClass").click(function () {

$('#qnimate').addClass('popup-box-on');

});

$("#removeClass").click(function () {

$('#qnimate').removeClass('popup-box-on');

});

})

</script>

Step 4

Final step is to add some html code to make the button and popup for chat.

<div class="container text-center">
 <div class="row">
  <h2>Open in chat (popup-box chat-popup)</h2>
        <h4>Click Here</h4>
        <div class="round hollow text-center">
        <a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Open in chat </a>
        </div>     
 </div>
</div>
<div class="popup-box chat-popup" id="qnimate">
 <div class="popup-head">
  <div class="popup-head-left pull-left">
   <img src="https://i.stack.imgur.com/rzgo4.jpg?s=328&g=1" alt="iamgurdeeposahan"> Deepak Anand
  </div>
  <div class="popup-head-right pull-right">
   <div class="btn-group">
    <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
    <i class="glyphicon glyphicon-cog"></i> </button>
    <ul role="menu" class="dropdown-menu pull-right">
    <li><a href="#">Media</a></li>
    <li><a href="#">Block</a></li>
    <li><a href="#">Clear Chat</a></li>
    <li><a href="#">Email Chat</a></li>
    </ul>
   </div>
   <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
  </div>
 </div>
 <div class="popup-messages">
 <div class="direct-chat-messages">
  <div class="chat-box-single-line">
   <abbr class="timestamp">October 8th, 2015</abbr>
  </div>
  <!-- Message. Default to the left -->
        <div class="direct-chat-msg doted-border">
          <div class="direct-chat-info clearfix">
            <span class="direct-chat-name pull-left">Deepak Anand</span>
          </div>
          <!-- /.direct-chat-info -->
          <img alt="message user image" src="https://i.stack.imgur.com/rzgo4.jpg?s=328&g=1" class="direct-chat-img"><!-- /.direct-chat-img -->
          <div class="direct-chat-text">
            Hey bro, howâ€™s everything going ?
          </div>
    <div class="direct-chat-info clearfix">
            <span class="direct-chat-timestamp pull-right">3.36 PM</span>
          </div>
   <div class="direct-chat-info clearfix">
   <span class="direct-chat-img-reply-small pull-left">
   </span>
   <span class="direct-chat-reply-name">Kamal Anand</span>
   </div>
          <!-- /.direct-chat-text -->
        </div>
  <div class="chat-box-single-line">
   <abbr class="timestamp">October 9th, 2015</abbr>
  </div>
        <div class="direct-chat-msg doted-border">
          <div class="direct-chat-info clearfix">
            <span class="direct-chat-name pull-left">Deepak Anand</span>
          </div>
          <!-- /.direct-chat-info -->
          <img alt="iamgurdeeposahan" src="https://i.stack.imgur.com/rzgo4.jpg?s=328&g=1" class="direct-chat-img"><!-- /.direct-chat-img -->
          <div class="direct-chat-text">
            Hey bro, howâ€™s everything going ?
          </div>
    <div class="direct-chat-info clearfix">
            <span class="direct-chat-timestamp pull-right">3.36 PM</span>
          </div>
   <div class="direct-chat-info clearfix">
     <img alt="iamgurdeeposahan" src="https://i.stack.imgur.com/rzgo4.jpg?s=328&g=1" class="direct-chat-img big-round">
   <span class="direct-chat-reply-name">Kamal Anand</span>
   </div>
        </div>
      </div>
 </div>
 <div class="popup-messages-footer">
  <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
  <div class="btn-footer">
  <button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
  <button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
     <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
  <button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
  </div>
 </div>
</div>

<h2>Open in chat (popup-box chat-popup)</h2>

<h4>Click Here</h4>

</div>

<img src="https://i.stack.imgur.com/rzgo4.jpg?s=328&g=1" alt="iamgurdeeposahan"> Deepak Anand

</div>

<li><a href="#">Media</a></li>

<li><a href="#">Block</a></li>

<li><a href="#">Clear Chat</a></li>

<li><a href="#">Email Chat</a></li>

</ul>

</div>

</div>

<abbr class="timestamp">October 8th, 2015</abbr>

</div>

<span class="direct-chat-name pull-left">Deepak Anand</span>

</div>

Hey bro, howâ€™s everything going ?

</div>

</div>

</span>

<span class="direct-chat-reply-name">Kamal Anand</span>

</div>

</div>

<abbr class="timestamp">October 9th, 2015</abbr>

</div>

<span class="direct-chat-name pull-left">Deepak Anand</span>

</div>

Hey bro, howâ€™s everything going ?

</div>

</div>

<span class="direct-chat-reply-name">Kamal Anand</span>

</div>

</div>

Chat popup using jquery and bootstrap

Step 1

Step 2

Step 3

Step 4

Try This Code Online