March 23, 2018
Hello, there... I need some help!
8:52 AM
Jane Doe joined the chat
Hi, John. I'm happy to help. What can I do for you today?
8:54 AM
I can't seem to pull up my order. Can you help me?
9:02 AM
Absolutely. You can find the status of, and trak, your order here: www.app.com/orders
9:03 AM
Works great! Thank you!
9:07 AM
I'm glad you made it! :)
9:08 AM
Please let me know if you have any more questions.
9:08 AM
Ending conversation since you've been inactive too long.
Do you want to see the chat source code? Click here and take a look.
9:10 AM
<div class="chat">
<div class="chat-messages">
<div class="container">
<p class="text-center">
<small class="text-muted">March 23, 2018</small>
</p>
<div class="message-sent">
<img src="john-doe.png" class="chat-avatar">
<p>
Hello, there... I need some help!
<br><small>8:52 AM</small>
</p>
</div>
<p class="text-center">
<small class="text-muted">Jane Doe joined the chat</small>
</p>
<div class="message-reply">
<img src="jane-doe.png" class="chat-avatar">
<p>
Hi, John. I'm happy to help. What can I do for you today?
<br><small>8:54 AM</small>
</p>
</div>
<div class="message-sent">
<img src="john-doe.png" class="chat-avatar">
<p>
I can't seem to pull up my order. Can you help me?
<br><small>9:02 AM</small>
</p>
</div>
<div class="message-reply">
<img src="jane-doe.png" class="chat-avatar">
<p>
Absolutely. You can find the status of, and trak, your order here: www.app.com/orders
<br><small>9:03 AM</small>
</p>
</div>
<div class="message-sent">
<img src="john-doe.png" class="chat-avatar">
<p>
Works great! Thank you!
<br><small>9:07 AM</small>
</p>
</div>
<div class="message-reply">
<img src="jane-doe.png" class="chat-avatar">
<p>
I'm glad you made it! :)
<br><small>9:08 AM</small>
</p>
</div>
<div class="message-reply">
<img src="jane-doe.png" class="chat-avatar">
<p>
Please let me know if you have any more questions.
<br><small>9:08 AM</small>
</p>
</div>
<p class="text-center">
<small class="text-danger">Ending conversation since you've been inactive too long.</small>
</p>
</div>
</div>
<form class="chat-footer">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type a message to Jane">
<div class="input-group-append">
<button type="submit" class="btn btn-success">
<i class="fa fa-paper-plane"></i>
</button>
</div>
</div>
</form>
</div>