Listings iFrame Snippets

before you start your boom contact will provide the link to put in place of the \<your link here> placeholder it always starts with https //boom rent/ only the link gets replaced the script line is literal https //boom rent/boom embed js is the real address, not a placeholder if the default embedding dimensions do not work as expected on your web page, please reach out to your boom contact for assistance boom recommends testing your changes on desktop and mobile devices before you publish test on a real phone, on your published page site builder previews (duda, hubspot, wix…) often do not run custom scripts, so the embed can look broken in the editor and work fine once published list of ready to use snippets recommended snippet the widget sizes itself embeds the listings and lets the widget take exactly the height of its content, so your page is the only thing that scrolls on desktop and on every mobile browser the height 90vh is only what visitors see until the listings load; a moment later the widget grows to fit for the widget to grow, its height has to be free to change do not wrap the iframe in a box with a fixed height and overflow hidden (some site builders add one) a wrapper with rounded corners and overflow hidden is fine as long as it has no fixed height do not pin the iframe height in your site's css with !important if either is present, the widget notices within a couple of seconds and falls back to the fixed height behaviour below nothing breaks, you just do not get the single scroll experience fixed height widget (scrollable within size constraints) the classic embed the widget keeps the height you give it and the listings scroll inside it on mobile, the script hands scrolling over to your page whenever the visitor reaches the top or bottom of the listings (see "scrolling on mobile with the fixed height widget") fixed height widget with a separate mobile height same as above, with the widget fixed to 768px on phones and tablets you can use this snippet as a base for experimentation to tweak the desktop size, replace height 90vh with the desired desktop height to tweak the mobile size, replace height 768px with the desired mobile height with the recommended (self sizing) script line these heights only apply until the listings load hubspot integration hubspot requires a css selector to attach the embed to the right element on your page replace \<use your css parent selector> with an actual selector that exists on the page var wrapper = document queryselector('\<use your css parent selector>'); how the self sizing widget works the listings report their height to the script on your page, and the script sets the iframe to match as the visitor filters, pages or opens a listing, the widget grows and shrinks with its content there is no scrollbar inside the widget, and no "stuck" scrolling on mobile when the visitor goes to the next page of listings or opens a listing, the script scrolls your page back to the top of the widget the new content starts there while a dialog inside the widget is open (the filters sheet on phones, the photo gallery), the script holds your page still and opens the dialog within the part of the widget that is on screen several widgets on one page are fine; each is sized on its own known limits on phones, the apply / contact buttons of a listing scroll with the content instead of staying pinned to the bottom; if your site has a fixed header, the top of the widget lands under it after a page change scrolling on mobile with the fixed height widget with a fixed height widget the listings scroll inside the iframe on mobile browsers a scroll gesture cannot cross the iframe boundary, so without help a visitor who reaches the top or bottom of the feed appears "stuck" the rest of your page your navigation above, your footer below stays out of reach, and visitors may conclude that listings are missing when they simply cannot scroll past the widget the boom embed js line fixes this when a visitor reaches an edge of the feed, the script gently scrolls your page onward in that direction, keeping the widget's search bar and pagination on screen to carry on, the visitor scrolls the part of the page around the widget nothing to configure good to know (both variants) it is the same script that powers conversion tracking (§4) one include covers both load it by src, from https //boom rent the same host as your listings link the script only trusts the widget it was loaded from; loading it from another address, or pasting its contents inline, disables it silently only one copy runs per page, so extra copies are harmless but keep them identical with a plain copy and a ?handoffmode=auto height copy on the same page, whichever loads first decides the mode no personal data ever crosses the frame boundary if you already embed boom with an older snippet, just add the one script line next to your existing iframe to switch an existing embed to the self sizing widget, add ?handoffmode=auto height to that line ad campaign & conversion tracking everything in this section is optional configuration the listings pages work without it (the boom embed js script itself is part of the standard snippets above and stays it also sizes the widget and handles scrolling around it, see "how the self sizing widget works") set it up when your marketing team wants to measure what the embedded pages produce which ad campaigns drive leads and showings, how visitors move through the funnel, or when they want to fire their own tags (meta pixel, ga4, anything routed through google tag manager) on a successful submission because boom's pages run inside an iframe on your site, tracking needs a small amount of glue in two directions into the frame when a visitor lands on your page from an ad, the click id ( gclid ) and campaign tags ( utm ) are on your page's url the iframe cannot read them on its own; a one time snippet forwards them in out of the frame when a visitor submits a form inside the iframe, tools on your page (gtm, meta pixel) cannot see it happen a one line script bridges the signal out you want what to set up see funnel activity in your google analytics (ga4) ga4 integration in the boom portal no snippet changes ( §2 /#2 google analytics ga4 ) google ads conversions attributed to your campaigns google ads integration in the portal + the forwarding snippet ( §1 /#1 forward ad click parameters into the iframe + §3 /#3 google ads conversion tracking ) fire your own tags via gtm (meta pixel, etc ) on submission the bridge script + one gtm trigger ( §4 /#4 google tag manager meta pixel host page events ) 1\ forward ad click parameters into the iframe browsers do not let an embedded iframe read the address bar of the page that embeds it so when a visitor arrives from an ad e g yoursite com/rentals?gclid=cj0k \&utm campaign=spring boom never sees those parameters unless your page passes them along add the data boom embed attribute to every boom iframe on the page, then paste this script once, anywhere after the iframe(s) what it does copies gclid , utm source , utm medium , utm campaign , utm term and utm content from your page's url onto the iframe's url only when they are present boom then stores them on the resulting lead and showing records and uses the gclid to report google ads conversions ( §3 /#3 google ads conversion tracking ) without this snippet, google ads conversion reporting falls back to google's own cookie matching (which only works some of the time), and campaign tags won't be attached to your leads in boom if you run any paid campaigns to pages with a boom embed, add it 2\ google analytics (ga4) if you use ga4, boom can report the visitor funnel inside the embedded pages straight into your ga4 property no snippet changes are needed setup boom portal → settings → integration → google analytics → paste your ga4 measurement id ( g xxxxxxxx ) once saved, these events appear in your ga4 property event in ga4 fired when listing contact us attempted a visitor opens the contact us form on a listing listing request showing attempted a visitor starts the request a showing flow listing apply attempted a visitor clicks apply on a listing listing custom button attempted a visitor clicks a custom button configured on your listings contact us submitted a visitor submits the contact / "about you" form on a listing request showing slot selected a visitor picks a showing time slot request showing completed a showing is booked prescreening submitted a visitor submits the pre screening questionnaire contact form submitted an embedded contact form is submitted 3\ google ads conversion tracking if you run google ads campaigns, boom can report a real google ads conversion (not just an analytics event) when a visitor converts inside the embed so your google ads dashboard shows "campaign x drove n leads / m showings" setup in google ads, find your conversion action's id and label goals → conversions → your conversion action → tag setup → "use google tag" you'll see a conversion id ( aw 123456789 ) and a conversion label create up to two conversion actions one for contact form submitted , one for showing booked in the boom portal → settings → integration → google ads → paste the conversion id and the label(s) add the forwarding snippet from §1 /#1 forward ad click parameters into the iframe to your page strongly recommended, so the click id reaches the iframe and conversions attribute reliably conversions are then reported at exactly two moments contact form submitted label a visitor submits a contact form (on a listing or embedded) showing booked label a visitor books a showing 4\ google tag manager / meta pixel (host page events) if you prefer to fire your own tags a meta pixel lead event, a ga4 tag in your own container, anything else in gtm boom can notify your page whenever a visitor completes a submission inside the iframe if you used one of the snippets at the top of this page, the script is already on your page skip to step 2 step 1 add the bridge script next to your iframe (once per page, covers every boom embed on it) use the address exactly as written https //boom rent https //boom rent is the host of every boom listings link, and the script only trusts messages from the host it was loaded from loading it from anywhere else, or pasting its contents inline, means events will be ignored if a snippet above already put the script on your page, do not add a second, plain copy only one copy runs, and a plain one loading first would switch off the self sizing widget step 2 create one gtm trigger on each successful submission the script pushes a custom event onto your data layer { event "boom form submitted", boom source "request showing completed", // which flow completed boom partner slug "your company", boom property slug "maple court", // present when a property is known boom unit slug "unit 3b", // present when a unit is known boom lead id "idle x1y2z3" // present when a lead was created } in gtm triggers → new → custom event → event name boom form submitted , then attach your existing meta pixel / ga4 / other tag to that trigger data layer field meaning boom source which flow completed contact form submitted , contact us submitted , request showing completed , or request showing submitted (showing requested, pending time confirmation) boom partner slug your company identifier always present boom property slug the property, when known boom unit slug the unit, when known boom lead id the created lead's id works well as meta's eventid for deduplication optionally create data layer variables for the boom fields to segment or deduplicate no personal data ever crosses the frame boundary ids and slugs only, never a name, email, or phone number meta ads nothing needs to be forwarded into the iframe for meta your pixel and its fbp / fbc cookies live on your page, and this event lets gtm fire the pixel right there attribution happens on meta's side the script is safe to include on pages without gtm, and safe to paste more than once it deduplicates itself verifying your setup the easiest tool for this is google tag assistant https //tagassistant google com/ it shows every google tag and data layer event firing on a page in real time open your page with test parameters appended, e g yoursite com/rentals?gclid=test123\&utm source=google\&utm campaign=test submit a contact form or book a showing through the embed your own tags (gtm) connect tag assistant https //tagassistant google com/ to your page gtm preview mode does this automatically the boom form submitted event appears in the data layer with the identifiers attached, and you can watch your meta / ga4 / other tags fire on it boom's ga4 & google ads tags they fire inside the iframe, so tag assistant on your page won't see them instead, connect tag assistant to the boom page itself open your boom listings link directly in a new tab with the same test parameters alternatively, in devtools → network a request to googleadservices com with send to=aw /\<label> confirms the ads conversion; it appears in google ads within a few hours ga4 the events appear in reports → realtime your boom contact can confirm the campaign tags ( gclid=test123 ) were stored on the resulting lead scrolling on a real phone, open your published page with the recommended snippet the widget has no scrollbar of its own swipe anywhere and the whole page scrolls, and after tapping page 2 the page comes back to the top of the widget with a fixed height widget, swipe the listings to their end the page should continue scrolling to reveal what is below the widget, and swiping back to the feed's top brings your navigation back into view if nothing happens, confirm that the script tag is present and loads from https //boom rent/boom embed js https //boom rent/boom embed js