Table of Contents:
WORDPRESS
Roofle has tested version 6.8.1 of WordPress
WARNING: changing your WordPress theme may cause your RoofQuotePRO™ installation to be overwritten.
There are two methods for implementing the RoofQuote PRO on a WordPress: plugin or manually. Both methods allow you to install the two versions of the widget (slideout & embedded).
To download the most current version of the official RoofQuote PRO plugin, click here.
Installing the plugin
- Navigate to the 'Plugins' tab on the left side of your WordPress dashboard
- Select 'Add Plugin'
- At the top of that page, choose 'Upload Plugin' and then upload the roof-quote-pro-widget.zip file
- Next go to the 'Installed Plugins' tab and select 'Activate' (if not already done).
- Navigate to the 'Settings' tab and select 'Roof Quote PRO' from the drop down.
- Enter in your Tool ID which can be found in the Pro Portal dashboard under Developer settings.
- Save Changes
Slideout Configuration (via plugin):
You can either set the slideout widget to be displayed globally across your website or specify it to a few pages. Both are controlled by checkboxes. By deselecting the default 'sitewide' option, you will gain the ability to use the 'specific pages' option.
Full page Embedded Configuration (via plugin):
When editing a page, find the block inserter button (generally a square + icon). Scroll down the list of blocks and look out for the Embeds section. There you will find a RoofQuotePRO Embed that you are able to drop into a page directly.
NOTE: The embed will not render on the site editor version of your page. It will only display the widget's name (RoofQuotePRO Embedded Widget). You will need to save & navigate to your website to view the entire widget.
Manual Installations on WordPress
Slideout Install (Globally):
- Navigate to: Tools -> Theme File Editor -> functions.php
- 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™
Slideout Install (Page Specific):
- Navigate to: Tools -> Theme File Editor -> functions.php
- 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™
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
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. For more information, please refer to Nitropack's docs.
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
roof-quote-pro-embedded-widget.js
to the exclude lists you prefer.
https://wordpress.org/plugins/sg-cachepress/
Beta fix: If you go to the theme editor in the WP back end and select the functions.php file like below, 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;
}
Elementor Site Generator
For more information, please refer to Elementor's docs on handling frontend scripts.
WIX
NOTE: To ensure that the widget loads on both the WIX site editor and your website, add the following domain to the whitelist on your Pro Portal dashboard under the 'Tool Scripts' tab:
filesusr.com
Slide-out Install (Globally)
- Turn on Dev Mode
- Go to Site -> My Dashboard
- Go to Settings -> Custom Code -> + Add Custom Code
- Paste the code snippet in and give the code a name
- Add the code to all or desired pages
- Choose “Place Code in: Head”
For a detailed example of this process, please refer to this article on Wix's support page.
Slide-out Install (Page Specific)
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>
Full Page Embedded Install
- Turn on Dev Mode
- Select Add Section
- Select Blank Section
- Select and highlight the new Section
- Select Quick Edit -> Add Elements -> Embed Code -> Embed HTML
- Paste in the standard <script> tag as well as the <div> tag below.
<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 Update
8. 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
NOTE: Wix websites use fixed-height sections. We recommend a height of 1040 pixels or taller.
SQUARESPACE
Slideout Install (Globally)
- Go to Settings -> Advanced -> Code Injection
- Paste the code snippet in the Header section and Save
Slideout Install (Page Specific)
- Go to the desired page
- Go to Settings (gear) icon -> Advanced
- Paste the code snippet in the Header section and Save
Full Page Embedded Install
- Go to the desired page
- Click Add Section -> Blank Section
- Select Add Block -> Code
- Expand the block size to the complete width of the grid (see screenshot)
- Click the Edit Pencil Icon
- 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> - 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 <script> 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
GODADDY WEBSITE BUILDER
NOTE: Add 'websites.godaddy.com' to the domain list in your Tool Scripts tab for testing the widget in GoDaddy’s website editor. This will whitelist the editor URL so you can test without deploying.
Slideout Install
- Click Edit My Site to enter the website editor.
- Locate the desired area of the page you would like to install the widget, and click Add Section
- Type “HTML” into the search box and select the Add Content button for HTML.
- Paste the Slideout <script> into the Custom Code text box and save.
- Click Preview My Site to ensure it saves.
Full Page Embedded Install
- Click Edit My Site to enter the website editor.
- Locate the desired area of the page you would like to install the widget, and click Add Section.
- Type “HTML” into the search box and select the Add Content button for HTML.
- Paste the Full Page embed <script> and the following <div> 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> - Click Preview My Site to ensure it saves.
For more information on GoDaddy Headers, please refer to this article.
GOOGLE SITES
Slideout Install
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 Embedded Install
- Go to the desired page.
- Click the section of the page you wish the widget to be placed after.
- In the Insert tab of the editor, select Embed.
- Select the Embed Code tab.
- 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> - Select Next -> Insert
- Use the box editor to make the widget full width by dragging the handles to the edges of the page.
- 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" />
WEEBLY
https://weeblytutorials.com/embed-javascript-weebly/
SHOPIFY
https://speedboostr.com/how-to-safely-edit-your-shopify-theme/