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>
Params
logoenab: Controls the widget logo shown in the experience (typically an ID/UUID pointing to the logo asset to use (configured in Monument FMS)
faviconenab: Controls the widget favicon (browser tab icon) (typically an ID/UUID pointing to the favicon asset to use (configured in Monument FMS)
pcolor: The widget primary color (brand color). In the example it’s URL-encoded as %23 for # (so %232A5A7B = #2A5A7B).
scolor: The widget secondary color. Same hex format/encoding as above.
bcolor: The widget background color. Same hex format/encoding as above.
trackerenab: Enables tracking/analytics integration for the embedded experience. In the example it’s 1 (enabled).
apayreq: Toggles whether autopay is required during the flow. In the example it’s 1 (required/enabled).
tcreq: Toggles whether terms & conditions acceptance is required. In the example it’s 1 (required/enabled).
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
The Monument FMS offers a Marketing Website Insights dashboard, allowing our clients to consistently track widget engagement and conversion events across all embedded experiences. This setup is required in addition to the client’s own GA4 implementation, so the client retains their reporting while Monument can populate internal insights
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) -->