SightMap js IFrame API

Engrain-Hy.Ly Demo

by Jacob Pearlstein

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SightMap JavaScript IFrame API Example</title>
    <script src="https://sightmap.com/embed/api.js">


    </script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">

  </head>

  <body>
    <div class="margin">
      <div class="head-container">
        <div class="title">
          <div class="textbox">
            Welcome to SightMap
          </div>
        </div>
      </div>
      <div class="schedule"> 
        <button href="javascript:void(0);" class="button hytour-link">
          Schedule a Tour
        </button>
      </div>
      <div id="hy-container" class="hy-overlay">
        <div class="hy-wrap">
          <div id="hy-container-content" class="hy-main"><iframe src="about:blank" allowtransparency="true" frameborder="0" name="container" id="hy-frame-container" style="width:100%; height:548px; border:none;" scrolling="no"></iframe></div><a id="hy-container-close" href="#" onclick="return false;" class="hy-close">Close</a>
        </div>
      </div>

      <div class="sightmap-container">
        <iframe id="sightmap" src="https://sightmap.com/embed/m1ywy83ovq0?enable_api=1&origin=https://fiddle.jshell.net" frameborder="0" width="100%" height="100%"></iframe>
      </div>
    </div>
  </body>

</html>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: open sans, sans-serif;
}

.margin {
  margin: 20px;
  height: 75%;
}

.head-container {
  width: 95%;
  margin: auto;
}

nav.container {
  display: block;
  background-color: #333333;
  text-align: center;
  margin: auto;
}

.nav-button {
  text-align: center;
  color: white;
  width: 100%;
}

.sightmap-container {
  height: 75%;
  min-height: 600px;
  align-items: center;
  justify-content: center;
}

.title {
  background-color: hsl(211, 38%, 61%);
  color: white;
  margin: auto;
  height: 15%;
}

.textbox {
  text-align: center;
  line-height: 233%;
  font-size: 40pt;
}

.button-list {
  display: flex;
  flex-direction: row;
}

.hy-overlay * {
  box-sizing: content-box !important;
}

.hy-overlay {
  background: rgba(198, 198, 198, 0.7) none repeat scroll 0 0;
  height: 100%;
  left: 0;
  position: fixed;
  text-align: center;
  top: 0;
  display: none;
  width: 100%;
  z-index: 99900;
  overflow: auto;
}

.hy-wrap {
  background-color: #FFFFFF;
  border: 5px solid transparent;
  margin: 60px auto 20px auto;
  padding: 0;
  position: relative;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
  max-width: 440px;
  width: 100%;
}

.hy-close {
  background-image: url("https://s3.amazonaws.com/img.myhyly/tpl/close.png");
  display: block;
  height: 30px;
  position: absolute;
  right: -15px;
  text-decoration: underline;
  text-indent: -9999px;
  top: -15px;
  width: 30px;
}

.hy-noscroll {
  overflow: hidden !important;
}

.schedule .hytour-link {
  margin: auto;
  display: flex;
  margin-top: 1rem;
	margin-bottom: 1rem;
}

@media (max-width: 480px) {
  .hy-wrap {
    width: 90%;
  }
}

JavaScript

$('document').ready(function() {
  // Establish SightMap
  // Create a new embed instance, providing the IFrame id value:
  var embed = new SightMap.Embed('sightmap');

  embed.on('ready', function() {
    console.log('hello world');
  });

  // Hy.Ly - Outbound Link API
  embed.on('outbound.hyly.click', function(event) {
    console.log(event);
    $('.hytour-link').click()
  });

  // Establish hy.ly
  (function(d, t) {
    var s = d.createElement(t),
      options = {
        id: 'container',
        host: 'my.hy.ly',
        path: '/tours/bainbridgelakeshadow/schedule?dd=0&src=w.pws&popup=1',
        triggerType: 'click',
				triggerValue: '.hytour-link',
        height: 548,
        width: 450
      };

    s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'my.hy.ly/mktg/js/popup.js?v3';
    s.onload = s.onreadystatechange = function() {
      var rs = this.readyState;
      if (rs)
        if (rs != 'complete')
          if (rs != 'loaded') return;
      try {
        new HyPopup(options);
      } catch (e) {}
    };
    var scr = d.getElementsByTagName(t)[0];
    scr.parentNode.insertBefore(s, scr);
  })(document, 'script');

});