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>