ApartmentGuide Lead Gen Demo

This is a demonstration of a lead gen handoff using a fancyBox modal window, using a simple jQuery fancybox() call.

by Jacob Pearlstein

HTML

<head>
  <!-- The following HTML should include a <script> tag to import the jQuery library, if it is not already available.  In Wordpress, jQuery should already be imported by default, so this step is not shown here. -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

  <!-- This imports the SightMap IFrame API library -->
  <script src="https://sightmap.com/embed/api.js"></script>

  <!-- This code imports the fancyBox files. -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
  <script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
</head>

<body>
  <h1>Apartment Guide: Lead gen demo</h1>

  <p>
    The interactive map is embedded on the web page. This may be embedded in-line or in a modal.</p>

  <iframe id="sightmap" src="https://sightmap.com/embed/6m9pzmg4vk1?enable_api=1&origin=https://fiddle.jshell.net" frameborder="0" width="100%" height="100%"></iframe>

  <div id="hidden-content">
    <div class="modal">
      <h3>Contact<br>The Confluence</h3><a class="_3iQId" href="tel:7203169145"><span data-tid="phone_link" data-tag_section="phone_number_link" data-tag_selection="phone" data-tag_action="lead_submission">(720) 316-9145</span></a>
      <div data-tid="lead-form-wrapper" class="zfjgC">
        <div class="Rjpst _3rO1F" id="inline-lead-form">
          <div class="wrapper2">
            <div class="_2ugl2">
              <div class="_16O4U _7BaoZ"><label for="textArea-message" data-tid="message-label" class="_22kQB">Message</label><textarea data-tid="add-message-input" data-tag_item="text" id="textArea-message" tabindex="0" class="_3Qjrt">I'm interested in The Confluence. Please send me current availability and additional details.</textarea></div>
            </div>
            <div class="_16O4U"><label for="inline-lead-form-text-name" data-tid="name-label" class="_22kQB">Name</label><input...

CSS

* {
  font-family: sans-serif;
}

body {
  background-color: #fff;
}

h1 {
  text-align: center;
  font-weight: 400;
}

#sightmap {
  height: 80vh;
}

#hidden-content {
  display: none;
}

.modal {
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: #616466;
  box-sizing: border-box;
  border: 0 solid #c8cacc;
  background-color: #fff;
  box-shadow: 1px 1px 6px 3px rgba(0, 0, 0, 0.15);
  z-index: 10;
  margin-bottom: 14px;
  width: 300px;
  position: sticky;
  overflow: hidden;
  border-radius: 3px;
  top: 28px;
}

h3 {
  box-sizing: border-box;
  border: 0 solid #c8cacc;
  text-shadow: 0 0 0 hsla(0, 0%, 40%, 0.5);
  font-weight: 600;
  margin: 0;
  padding-bottom: 1px;
  padding-top: 13px;
  text-transform: uppercase;
  color: #00070d;
  text-align: center;
  border-top: 3px solid #ff132f;
  font-size: 18px;
  line-height: 1.17;
  letter-spacing: 0.5px;
}

._3iQId {
  box-sizing: border-box;
  border: 0 solid #c8cacc;
  background-color: transparent;
  text-transform: uppercase;
  cursor: pointer;
  display: table;
  font-weight: 600;
  margin: auto;
  padding-bottom: 10px;
  text-decoration: none;
  font-size: 18px;
  line-height: 1.17;
  letter-spacing: 0.5px;
  color: #3d6f99;
}

.zfjgC {
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: #616466;
  box-sizing: border-box;
  border: 0 solid #c8cacc;
  border-top: none;
  padding-top: 6px;
}

.Rjpst {
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: #616466;
  box-sizing: border-box;
  border: 0 solid #c8cacc;
  padding: 6px 10px 13px;
  padding-bottom: 0;
  margin-bottom: 1px;
}

.VmJ9d {
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: #616466;
  box-sizing: border-box;
  border: 0 solid #c8cacc;
  align-items: center;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  display: flex;
  height: 81px;
  justify-content: space-around;
  padding: 20px 16px;
  background-color: #f2f4f5;
  margin-top: 17px;
}

._2ugl2 {
  line-height: 2.1rem;
  box-sizing: border-box;
  border: 0...

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
  // Create a new embed instance, providing the IFrame id value:
  var embed = new SightMap.Embed('sightmap')

  // Check to ensure embed is ready
  embed.on('ready', function() {
    console.log('hello world');
  })

  embed.on('apply', function() {
    console.log('Contact Click');
    $('#fancybox-modal-trigger').click()

  })
});