This article contains basic developer instructions for installing both forms of the widget.
NOTE: For more information on specific website builders (ex: WordPress, WIX, Squarespace), please refer to this article which goes into more detail.
GUIDE INTRO
The RoofQuote PRO™ website installation process is the addition of a single script tag. This script is placed in two different elements depending on the type of widget.
- Slideout: <script> placed in the <head> of the desired page
- Embedded: <script> placed in the <body> of the desired page
NOTE: The snippets in this document are only for example and will not work. The final script URL is specific to your company and will be available in your Pro Portal dashboard.
STANDARD INSTALL
Slideout Widget
Place the following Javascript snippet in the <head> element of the desired pages.
<script src="https://app.roofle.com/roof-quote-pro-widget.js?id=XXX-YOUR-TOOL-ID-HERE" async></script>
See the Slideout Widget API section for advanced controls to program the opening/closing of the Slide-out Widget.
Full Page Embedded Widget
Place the following Javascript snippet in the <body> element of the desired pages.
<script src="https://app.roofle.com/roof-quote-pro-embedded-widget.js?id=XXX-YOUR-TOOL-ID-HERE" async></script>
SLIDEOUT WIDGET API
There is a Javascript API to control the widget. The widget is exposed onto the `window` object as `RoofQuotePro`.
The following methods are available:
- RoofQuotePro.open()
- RoofQuotePro.close()
- RoofQuotePro.toggle()
JAVASCRIPT iFRAME EVENTS
The widget's <iframe> is configured to emit events for analytics purposes. These events can be captured with Javascript in the parent window and utilized for the analytics solution of your choice (e.g. Google Analytics).
The following code is a recommended configuration and an example of sending the analytics events directly to Google Analytics. This code can be implemented directly on pages which have the Roof Quote PRO widget installed, or it can be added to Google Tag Manager as a Custom HTML Tag with the DOM-ready trigger.
To learn more about optimizing the widget for Google Ads campaigns, read How to set up Google Tag Manager to record RQP events in our Knowledge Base.
<script>
window.addEventListener("message", function (event) {
if (event.origin.includes("app.roofle.com")) {
if (!dataLayer) {
console.warn("Google Analytics is not installed.");
return;
}
// Track the widget was loaded
if (event.data.event === "Roof-quote-pro-viewed") {
send("roofquotepro_viewed");
}
// Track the address entered event
if (event.data.event === "Address-loaded") {
send("roofquotepro_address_loaded");
}
// Track the contact form submitted event
if (event.data.event === "Contact-form-submitted") {
send("roofquotepro_lead_submitted");
}
// Track the help/other contact form submitted event
if (event.data.event === "Get-help-form-submitted") {
send("roofquotepro_other_contact_submitted");
}
// Track the product detail requested event
if (event.data.event === "Product-requested-cta") {
send("roofquotepro_product_requested");
}
}
function send(event) {
console.log("Roof Quote PRO™ sent the " + event + " event to Google Analytics");
dataLayer.push({
event: event,
});
}
});
</script>
Event Names
The following is a list of event names that the <iframe> may emit. These names will not change, but more events may be added in the future.
roofquotepro_address_loaded
roofquotepro_slope_changed
roofquotepro_roof_renamed
roofquotepro_roof_inclusion_toggled
roofquotepro_edit_roofs
roofquotepro_lead_form_displayed
roofquotepro_lead_submitted
roofquotepro_other_contact_form_displayed
roofquotepro_other_contact_submitted
roofquotepro_product_requested
Event Example Data
The following is an example JSON emitted by a single event. All events contain the data property which holds the event information.
data: {
"event": "Contact-form-submitted",
"sessionId": "EvQPb3PWVlUWuJaXSNBc6",
"marketSlug": "minneapolis-st-paul_mn"
}
OTHER ISSUES / TROUBLESHOOTING
Custom Website CSP Errors
Some sites have Content Security Policy (CSP) restrictions. The web developer will need to update the website headers to allow the iframe to be hosted on their domain.