With HapYak, You can load a dynamic URL from the video based on information submitted by a viewer.

For example, a viewer can enter a zip code and the web site they click through to will be personalized for the information entered.

Example Video

How-To

To accomplish this, use the iframe annotation: 

Below is some sample code you can use to get started. Paste this into the Editor section of the iframe annotation.

<!doctype html>
<html>
<head>
<title></title>
  <style type="text/css">
    html, body {
      margin: 0; padding: 0;
      background-color: white;
      font-size: 1.3em;
    }
    form {
      margin-left: 20px;
      margin-right: 20px;
    }
    input {
      font-size: 1.3em;
    }
  </style>
</head>
<body>
  <!-- HTML code goes here -->
  <form id="form">
    <input type="text" id="zip" placeholder="enter zip code"/>
    <input type="submit"/>
  </form>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak-iframe.js"></script>
</body>
<script type="text/javascript">
  (function () {
    $('#form').submit(function (e) {
      e.preventDefault();
      var zip = $('#zip').val();
      window.open('https://www.google.com/maps/place/' + zip);
    });
    document.getElementById('zip')
  }());
</script>
</html>

Did this answer your question?