Recommended setup
Add the tracking script once to the website's global header so it runs on landing pages before visitors navigate to the page with the Instant Roofer embed.
1. Global header tracking script
Place this in the global header/template of the website. It captures UTM parameters, GCLID, and the original landing page URL for leads.
<!--
Recommended:
Add this once to the global header of the website so Instant Roofer can capture
UTM/GCLID data and the original landing page URL before visitors reach the embed.
-->
<script>
window.IR_APP_ORIGIN="https://book.instantroofer.com";
</script>
<script
src="https://book.instantroofer.com/js/instant-roofer-google-ads-integration.min.js"
></script>2. Website Calculator embed block
Place this where the Instant Roofer tool should appear on the website.
<!-- Add this HTML block to the body of your webpage to display the Instant Roofer Website Calculator: -->
<div>
<iframe
src="https://book.instantroofer.com/?product=estimate&id=710405d1-92c5-4ce0-88cb-bdbfc1a086c1&materials=shingleAsphaltArchitect,shingleAsphaltDesigner"
style="display:block;aspect-ratio:0.53;width:345px;inline-size:345px;height:650px;block-size:650px;margin-left:auto;margin-right:auto;position:static;align-content:normal;align-items:normal;align-self:auto;bottom:auto;box-sizing:content-box;clear:none;clip:auto;display:block;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;justify-content:normal;left:auto;max-block-size:none;max-height:none;max-inline-size:none;max-width:none;min-block-size:0px;min-height:0px;min-inline-size:0px;min-width:0px;overflow-x:clip;overflow-y:clip;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;resize:none;right:auto;top:auto;visibility:visible;z-index:auto;border:none;"
></iframe>
<div style="text-align: center; margin-top: 10px;">
Powered by <a href="https://www.instantroofer.com">Instant Roofer</a>
</div>
</div>Single-page solution
If the website cannot add a global header script, paste this full block on the same page where the Website Calculator appears. This can capture UTM data only when the visitor lands on that same page.
All-in-one page code
Includes both the tracking script and the embed block for a single-page install.
<!--
Single-page setup:
Paste this full block on the same page where the Instant Roofer Website Calculator appears.
For the best UTM and landing-page tracking, use the global header script separately instead.
-->
<!--
Recommended:
Add this once to the global header of the website so Instant Roofer can capture
UTM/GCLID data and the original landing page URL before visitors reach the embed.
-->
<script>
window.IR_APP_ORIGIN="https://book.instantroofer.com";
</script>
<script
src="https://book.instantroofer.com/js/instant-roofer-google-ads-integration.min.js"
></script>
<!-- Add this HTML block to the body of your webpage to display the Instant Roofer Website Calculator: -->
<div>
<iframe
src="https://book.instantroofer.com/?product=estimate&id=710405d1-92c5-4ce0-88cb-bdbfc1a086c1&materials=shingleAsphaltArchitect,shingleAsphaltDesigner"
style="display:block;aspect-ratio:0.53;width:345px;inline-size:345px;height:650px;block-size:650px;margin-left:auto;margin-right:auto;position:static;align-content:normal;align-items:normal;align-self:auto;bottom:auto;box-sizing:content-box;clear:none;clip:auto;display:block;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;justify-content:normal;left:auto;max-block-size:none;max-height:none;max-inline-size:none;max-width:none;min-block-size:0px;min-height:0px;min-inline-size:0px;min-width:0px;overflow-x:clip;overflow-y:clip;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;resize:none;right:auto;top:auto;visibility:visible;z-index:auto;border:none;"
></iframe>
<div style="text-align: center; margin-top: 10px;">
Powered by <a href="https://www.instantroofer.com">Instant Roofer</a>
</div>
</div>