<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <script type="text/javascript"
	    src="//static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>
    <script type="text/javascript"
	    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <link href="//static0.twilio.com/resources/quickstart/client.css"
	  type="text/css" rel="stylesheet" />
    <script type="text/javascript">
      Twilio.Device.setup("{{ token }}");
      Twilio.Device.ready(function (device) {
        $("#log").text("Ready");
      });
      Twilio.Device.error(function (error) {
        $("#log").text("Error: " + error.message);
      });
      Twilio.Device.connect(function (conn) {
        $("#log").text("Successfully established call");
      });
      function call() {
        Twilio.Device.connect();
      }
    </script>
  </head>
  <body>
    <button class="call" onclick="call();">
      Call
    </button>
    <div id="log">Loading pigeons...</div>
  </body>
</html>
