Skip to content
English
LOGIN
  • There are no suggestions because the search field is empty.

RoofQuote PRO Installation Guide

This article contains basic developer instructions for installing the widget.

Requirements:

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:

  1. To start, login to your portal and find the Settings icon.
  2. Choose Developer from the menu.
  3. 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.
  4. To install, copy the applicable script tag and then place on your webpage in various destinations
    1. Slideout Widget
      1. 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>
    2. Full Page Embedded Widget
      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>

 

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:

  1. RoofQuotePro.open()
  2. RoofQuotePro.close()
  3. RoofQuotePro.toggle()