Chat template

template.html

<div class="tv-main-content">
	<div class="main-trip">
	  <div class="container">
	  
			<div class="row">
				<div class="col-md-6">
				  <h2>{{agency.name}} Live Chat</h2>
				  <h4>Hi {{trip.author.first_name}}</h4>
				  {% if advisor.size > 0 %}
				    
				    {% if advisor.photo.thumb.size > 0 %}
				    <!-- thumbnail -->
				    <img src="{{advisor.photo.thumb}}" style="border-radius: 20px; width: 40px;">
				    {% endif %}
				    
				    <p>I'm {{advisor.name}}, your {{advisor.title}}. Ask me any questions about your trip to {{trip.title}}</p>
				  {% else %}
				    <p>Chat with your travel assistant. Ask any questions about your trip to {{trip.title}}</p>
				  {% endif %}
				  <hr />
				  
				  <!-- messages --->
				  <ul id="chatlist">
				 
				  </ul>
				  
				  <!-- add a message -->
				  <form method="POST" id="talk-action">
				    <textarea name="msg" rows="2" style="width: 400px;" rows="2" autofocus="true"></textarea>
				    <br/>
				    <button type="submit">Send</button>
				  </form>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
    zid = " {{trip.zid}}"
    api_url = "http://host/2/talk/" + zid + "?skip_api_key=" // TODO: change host for production hostname

    function formatDate(date) {
      var year = date.getFullYear(),
          month = date.getMonth() + 1, // months are zero indexed
          day = date.getDate(),
          hour = date.getHours(),
          minute = date.getMinutes(),
          second = date.getSeconds(),
          hourFormatted = hour % 12 || 12, // hour returned in 24 hour format
          minuteFormatted = minute < 10 ? "0" + minute : minute,
          morning = hour < 12 ? "am" : "pm";

      return month + "/" + day + "/" + year + " " + hour + ":" +
             minuteFormatted + morning;
    }

    function messageLine(message) {
      date = new Date(message.created_at)
      $('#chatlist').append('<li><strong>' + message.author.name  +
                            ':</strong> ' + message.content + '<br>' +
                            formatDate(date) + '</li>')
    }

    $("#talk-action").submit(function(event) {
      $.post(api_url, { msg: $('#msg').val() },
             function(data) {
               message = data.response;
               if(data) {
                 messageLine(message)
               } else {
                 alert("Can't connect, please check your internet connection")
               }
             },'json');
      return false;
    })

    function loadMessages() {
      $.get(api_url,
            function(data) {
              $('#chatlist').html("")
              messages = data.response;
              messages.forEach(function (message) {
                messageLine(message)
              });
            },'json');
      }

      $(document).ready(function () {
        loadMessages();
      });

      setInterval(function () {
        loadMessages();
      }, 3000);
  </script>