This article contains basic developer instructions for installing the widget.
Requirements:
- Roof Quote PRO™ active subscription
- Admin user access
Overview:
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. This article also delves into certain tweaking of the API and iframe events.
- Slideout: placed in the <head> of the desired page
- Embedded: placed in the <body> of the desired page
HEADS UP! For more information on specific website builders (ex: WordPress, WIX, Squarespace), please refer to this article which goes into more detail.
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.
Instructions:
- To start, login to your portal and find the Settings icon.
- Choose Developer from the menu.
- Once on the Developer page, click on the Tool Scripts tab. This is where you will find all of the necessary scripts for all styles of widget.
- To install, copy the applicable script tag and then place on your webpage in various destinations
- 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>
- Place the following Javascript snippet in the <head> element of the desired pages.
- 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>
- Place the following Javascript snippet in the <body> element of the desired pages.
- Slideout Widget
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()
<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"
}
WARNING: 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.