Summary

Embedding Monument’s rental widget on your facility website allows customers to explore units, complete rentals, and submit leads seamlessly—all without leaving your site. To ensure the widget displays beautifully, functions correctly, and reports accurate analytics, there are a few key implementation steps to follow.

This guide walks you through embedding the iFrame, optimizing its responsiveness, and connecting the experience to Monument’s GA4 tracking so your marketing and operations teams get full visibility into on-site performance.

Step 1 - Embedding the Widget

For each location, add the facility-specific widget code in the preferred spot on the page.

// Example location

<iframe
src='https://tenant-suite.prd.monument.io/sandboxstorage/shopping/facilities?logoenab=a0adbdd0-beeb-49d2-b39e-1208e38a3059&faviconenab=f02b41bd-542f-4109-ad8e-79682e82264d&pcolor=%232A5A7B&scolor=%23EDC44D&bcolor=%23F4F1EB&trackerenab=1&apayreq=1&tcreq=1'scrolling="no"allow="geolocation" width='100%'height='800px'></iframe>

Step 2 - Sizing the Widget

Add this script to the header of the website to handle resizing the height of the widget as user progresses through the rental experience.

<script>

// Iframe
function adjustIframeHeight(event) {  
  const trustedOrigin = 'https://tenant-suite.stg.monument.io';    
  const trustedOriginTwo = 'https://tenant-suite.prd.monument.io';

// Security check to ensure the message comes from the correct origin  
if (event.origin !== trustedOrigin && event.origin !== trustedOriginTwo) return;

// Corrected the iframe ID to 'locationiFrame'    
const iframe = document.getElementById('locationiFrame'); 
  
// Check if the message is a command to reset the scroll position    
if (event.data === "RESET_TO_TOP") {    
	iframe.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })   
    return;    
}
    
    
  // Ensure the message data is a number before setting the height    
  if (iframe && !isNaN(event.data)) {    
    console.log(`Adjusting iframe height to: ${event.data}px`);  
    iframe.style.height = event.data + 'px';    
  }    
    
  // Prevent the main window from scrolling when interacting with the iframe    
  const mainScrollTop = window.pageYOffset || document.documentElement.scrollTop;    
    
  // Check if the popup in the iframe is open (this could vary based on how the popup works)    
  if (event.data.popupOpen) {    
    console.log("Locking main window scroll due to a popup.");  
	iframe.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })  
  }    
}    
    
// Listen for message events from the iframe    
window.addEventListener('message', adjustIframeHeight, false);

function scrollToIframe() {    
  const iframe = document.getElementById('locationiFrame'); 
  iframe.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }) 
}  
</script>

Step 3 - Connecting the site to Monument’s GA4

For each page containing a monument rental widget:

Paste this code as high in the <head> of the page as possible:


<!-- Google Tag Manager --> 
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new 
Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 
'https://www.googletagmanager.com/gtm.js?
id='+i+dl;f.parentNode.insertBefore(j,f); })
(window,document,'script','dataLayer','GTM-PZ3GP25P');</script> <!-- End 
Google Tag Manager -->

Paste this code immediately after the opening <body> tag:

<!-- Google Tag Manager (noscript) --> <noscript><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-PZ3GP25P" 
height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

This powers the Marketing Website Insights dashboard found in the Monument FMS.

How To: Embedding a Location iFrame on Rental Website

Summary

Step 1 - Embedding the Widget

Step 2 - Sizing the Widget

Step 3 - Connecting the site to Monument’s GA4