Tool Scripts
      Back to home
      1. Knowledge Base
      2. Developer
      3. Tool Scripts

      RoofQuote PRO Installation Guide

      In-depth Developer Instructions for Website Tool Installation

      OVERVIEW

      Web Installation Methods
      Wordpress
      WIX
      Squarespace
      Hubspot
      Weebly
      Shopify
      GoDaddy
      Google Sites
      NextJs/Vercel
      Slideout Widget Javascript API
      Analytics Javascript iFrame Events
      Other Issues/Troubleshooting

      GUIDE INTRO

      The RoofQuote PRO™ website installation process is the addition of a single script tag to the <head> section of the desired website pages for the Slide-out widget. And the addition of a single script to the <body> section exactly where you want to see the Full Page embedded widget or Contractor Loan Pro popup button on any of your website pages.

      For many customers, the Slide-out widget is a global configuration that appears on all pages.

      Note that the snippets in this document will not work. They are only examples. The final script URL is specific to your company and will be available in your Pro Portal dashboard.

      WEB INSTALLATION METHOD

      Slide-out Javascript Tag

      Place the following Javascript snippet in the <head> element of the desired pages.

      <script

        async

        src="https://app.roofle.com/roof-quote-pro-widget.js?id=XXX-YOUR-TOOL-ID-HERE"

      ></script>


      See the Slide-out Widget Javascript API section for advanced controls to program the opening/closing of the Slide-out Widget.

      Full Page Embed Tag

      1. 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>

      WORDPRESS (most common)

      Roofle has tested version 6.01 of Wordpress

      WARNING: changing your Wordpress theme may cause your RoofQuotePRO™ installation to be overwritten.

      Wordpress


      Wordpress Plugin

      Additional documentation is coming soon...

      Manual installation method:

      1. Navigate to: Tools -> Theme File Editor -> functions.php
      2. Add the following code snippet to the bottom of the functions.php file:

      // Begin: Include Roof Quote PRO™ script in global <head> element

      function include_roof_quote_pro(){

        ?>

          <script

            async

            src="https://app.roofle.com/roof-quote-pro-widget.js?id=XXX-YOUR-TOOL-ID-HERE"

            onLoad="console.log('Loaded Roof Quote PRO™')"

          ></script>

        <?php

      };


      add_action('wp_head', 'include_roof_quote_pro');

      // End: Include Roof Quote PRO™

      Plugin Global Installation Method

      1. Install the Header and Footer plugin: https://wordpress.org/plugins/header-footer/
      2. Navigate to: Settings -> Header and Footer and select the Header and Footer tab if it is not selected.
      3. Add the following code snippet to the <head> page section:

      <!-- Begin: Include Roof Quote PRO™ script in global <head> element -->

      <script

          async

          src="https://app.roofle.com/roof-quote-pro-widget.js?id=XXX-YOUR-TOOL-ID-HERE"

          onLoad="console.log('Loaded Roof Quote PRO™')"

        ></script>

      <!-- End: Include Roof Quote PRO™  -->

      Manual Installation of Slideout Widget on Individual Pages

      1. Navigate to: Tools -> Theme File Editor -> functions.php
      2. Add the following code snippet to the bottom of the functions.php file:

      // Begin: Include Roof Quote PRO™ script on specific page <head> elements

      function include_roof_quote_pro_on_specific_pages(){

        if( is_page( array( 'sample-page', 'second-page' ) ) ){

          ?>

            <script

              async

              src="https://app.roofle.com/roof-quote-pro-widget.js?id=XXX-YOUR-TOOL-ID-HERE"

              onLoad="console.log('Loaded Roof Quote PRO™')"

            ></script>

          <?php

        }

      };


      add_action('wp_head', 'include_roof_quote_pro_on_specific_pages');

      // End: Include Roof Quote PRO™

      Online Examples

      https://kinsta.com/knowledgebase/add-code-wordpress-header-footer/

      Manual Installation of Full Page Widget

      Brad to provide a more complete guide here.

      WP Rocket Plugin

      There is a known issue that WP Rocket rewrites the embed code, causing it to not be able to load correctly.

      A suggested fix is to add roof-quote-pro-widget.js and roof-quote-pro-embedded-widget.js to the list of Excluded Files in the Javascript Minification section of WP Rocket.

      WP Rocket -> Settings -> File Optimization -> Javascript Files section



      Nitro Pack Plugin

      There is a known issue that Nitro Pack rewrites the embed code, causing it to not be able to load correctly. 

      A suggested fix is to add roof-quote-pro-widget.js and roof-quote-pro-embedded-widget.js to the list of Excluded Resources section of Nitro Pack.

      https://support.nitropack.io/hc/en-us/articles/1500002527542-Excluded-Resources

      Elementor Wordpress Site Generator

      Elementor Wordpress Site Generator documentation:


      https://developers.elementor.com/docs/scripts-styles/frontend-scripts/


      Roofle has not tested SiteGround yet for further documentation.

      SiteGround Plugin

      There is a known issue that SiteGround rewrites the embed code, causing it to not be able to load correctly. 


      A suggested fix is to review the following documentation and add  roof-quote-pro-widget.js and roof-quote-pro-embedded-widget.js to the exclude lists you prefer.


      https://wordpress.org/plugins/sg-cachepress/


      Roofle has not tested SiteGround yet for further documentation.


      Beta fix: ​​If you go to the theme editor in the WP back end and select the functions .php file like below, if you plug in the following code at the bottom of the .php file and save it, the optimizer will ignore the widget and it should work normally at that point



      add_filter( 'sgo_javascript_combine_excluded_external_paths', 'js_combine_exclude_external_script' );

      function js_combine_exclude_external_script( $exclude_list ) {

          $exclude_list[] = 'app.roofle.com';

          $exclude_list[] = 'https://app.roofle.com/roof-quote-pro-embedded-widget.js';

      $exclude_list[] = 'https://app.roofle.com/roof-quote-pro-widget.js';

          return $exclude_list; 

      }

      WIX

      Slide-out Installation Method

      1. Turn on Dev Mode
      2. Go to Site -> My Dashboard
      3. Go to Settings -> Custom Code -> + Add Custom Code
      4. Paste the code snippet in and give the code a name
      5. Add the code to all or desired pages
      6. Choose “Place Code in: Head”

      Online Example

      https://support.wix.com/en/article/embedding-custom-code-to-your-site#adding-custom-code-to-your-site

      Full Page Installation Method

      1. Turn on Dev Mode
      2. Select Add Section
      3. Select Blank Section
      4. Select and highlight the new Section
      5. Select Quick Edit -> Add Elements -> Embed Code -> Embed HTML
      6. Paste in the div tag AND the script tag
        1. E.g.
          <script src="https://app.roofle.com/roof-quote-pro-embedded-widget.js?id=XXX-YOUR-TOOL-ID-HERE" async></script>

      <div id="roof-quote-pro-embedded"></div>

      1. Click Update
      2. Use the drag handles to drag the embedded section to be the full width and height of the Section you created. Or, use the Stretch to Full Width <-> feature in the Wix interface
      3. Wix websites use fixed-height sections. We recommend a height of 1040 pixels or taller.

      Individual Page Installation Workaround

      When installing the widget on individual pages Wix will persist the widget on page changes due to their page loading strategy. The result is the widget may appear on pages you did not want to include.


      A workaround to this issue is to add the following Custom Code block to the Body - End section of all pages.


       <script type="text/javascript">

       (function (history) {

         const pushState = history.pushState;

         history.pushState = function (state) {

           pushState.apply(history, arguments);

           setTimeout(toggleWidgetFromPushState, 250);

         };



         function toggleWidgetFromPushState() {

           const script = document.querySelector(

             'script[src^="https://app.roofle.com/roof-quote-pro-widget.js"]'

           );

           const widget = document.getElementById("roof-quote-pro-widget");



           if (widget) {

             widget.style.display = !!script ? "" : "none";

           }

         }

       })(window.history);

      </script>


      SQUARESPACE 

      Slide-out Global Installation Method

      1. Go to Settings -> Advanced -> Code Injection
      2. Paste the code snippet in the Header section and Save

      Slide-out Individual Page Method

      1. Go to the desired page
      2. Go to Settings (gear) icon -> Advanced
      3. Paste the code snippet in the Header section and Save

      Full Page Installation Method

      1. Go to the desired page
      2. Click Add Section -> Blank Section
      3. Select Add Block -> Code
      4. Expand the block size to the complete width of the grid (see screenshot)
      5. Click the Edit Pencil Icon
      6. Paste in the Snippet (be sure there are no “curly quotes”, they must be straight HTML quotes).
        <script src="https://app.roofle.com/roof-quote-pro-embedded-widget.js?id=XXX-YOUR-TOOL-ID-HERE" async></script>
        <div id="roof-quote-pro-embedded"></div>
      7. Click Save

      HUBSPOT

      Hubspot provides multiple locations to include the HTML Javascript Tag in the <head> section of the template or individual page.

      Installation For Templates

      For templates, you can include the tag in the “Additional <head> markup” section of the template editor.


      Marketing -> Files and Templates -> Design Tools -> My Template


      Use a custom HTML module to insert the script for the full-page embedded widget.

      Installation For Pages

      For pages, you can include the tag by navigating to: 

      Marketing -> Website -> Website Pages -> My Page -> Edit -> Settings -> Advanced Settings -> Head HTML 

      WEEBLY

      https://weeblytutorials.com/embed-javascript-weebly/

      SHOPIFY

      https://speedboostr.com/how-to-safely-edit-your-shopify-theme/

      GODADDY WEBSITE BUILDER

      Add websites.godaddy.com to the domain list for testing the widget in GoDaddy’s website editor.

      Slide-out Installation Method

      Due to technical restrictions enforced by GoDaddy, it is not possible to install the slide-out widget on websites built with GoDaddy Website Builder. You must use the full-page installation method.

      Full Page Installation Method

      To enable previewing the widget in the website builder, we recommend adding websites.godaddy.com to the domain whitelist in addition to the contractor domain.


      The Full Page embed tags can be installed with the following steps:

      1. Click Edit My Site to enter the website editor.
      2. Locate the desired area of the page you would like to install the widget, and click Add Section.
      3. Type “HTML” into the search box and select the Add Content button for HTML.
      4. Paste the Full Page embed code into the Custom Code text box and save.
        <script src="https://app.roofle.com/roof-quote-pro-embedded-widget.js?id=XXX-YOUR-TOOL-ID-HERE" async></script>
        <div id="roof-quote-pro-embedded"></div>
      5. Click Preview My Site to ensure it saves.

      GoDaddy E-Store

      https://findhelp.wsb-estoregodaddy.com/hc/en-us/articles/360059681631-Header-HTML

      GOOGLE SITES

      Slide-out Installation Method

      Due to technical restrictions enforced by Google, it is not possible to install the slide-out widget on websites built with Google Sites. You must use the full-page installation method.

      Full Page Installation Method

      1. Go to the desired page.
      2. Click the section of the page you wish the widget to be placed after.
      3. In the Insert tab of the editor, select Embed.
      4. Select the Embed Code tab.
      5. Paste the Full Page embed code into the Custom Code text box and save.
        <script src="https://app.roofle.com/roof-quote-pro-embedded-widget.js?id=XXX-YOUR-TOOL-ID-HERE" async></script>
        <div id="roof-quote-pro-embedded"></div>
      6. Select Next -> Insert
      7. Use the box editor to make the widget full width by dragging the handles to the edges of the page.
      8. Use the box editor to increase the height of the widget a good amount. You will need to test the published page to see if there is enough height for the widget to work well.

      NEXT.JS

      The Next.Js code snippet can be placed globally in _app.js, or on individual pages.

      import Script from "next/script";


      <Script

        strategy="beforeInteractive"

        src="https://app.roofle.com/roof-quote-pro-widget.js?id=XXX-YOUR-TOOL-ID-HERE"

      />


      For the full page embed script, use `afterInteractive` along with the <div> element.


      <Script

        strategy="afterInteractive"

        src="https://app.roofle.com/roof-quote-pro-embedded-widget.js?id=XXX-YOUR-TOOL-ID-HERE"

        async

      />

      <div id="roof-quote-pro-embedded" />

      SLIDE-OUT WIDGET JAVASCRIPT 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()

      ANALYTICS JAVASCRIPT iFRAME EVENTS


      The widget 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 is an example of sending the Analytics Events directly to Google Analytics. This code can be installed directly on pages which have Roof Quote PRO installed, or it can be added to Google Tag Manager as a Custom HTML Tag with the DOM ready trigger.


      Read How to set up Google Tag Manager to record RQP events and conversions in Google Analytics. This is helpful for optimizing your Google Ads campaigns.

      <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 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.