NOTE: To ensure that the widget loads on both the WIX site editor and your website, add the following domains to the whitelist on your Pro Portal dashboard under the 'Tool Scripts' tab:
filesusr.com
editor.wix.com
Slideout Install
Globally
- 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 pages
- Choose “Place Code in: Head”
For a detailed example of this process, please refer to this article on Wix's support page.
Page Specific
- Repeat steps 1-3 from above.
- Instead of adding to all pages, select the specific pages you'd like the code to be applied to.
- Choose “Place Code in: Head”
Full Page Embedded Install
HEADS UP! Wix websites use fixed-height sections which stiffen the containers. This causes issues as our widget expands and contracts as its used. To combat this problem, we recommend using a section height of 1040 px on desktop and 540 px on mobile.
- 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>
<style> body { margin: 0 } </style>
7. Click Update
8. Use the drag handles to drag the HTML to be the full width and height of its parent Section.
a. On mobile view, leave some gaps between the left and right sides of the HTML block and the section border so that users are able to scroll up/down accordingly.
Full Page Embedded Install (Analytics Tracking)
Use this installation method if you want to track RoofQuote PRO® widget events with Google Tag Manager, GA4, Google Ads, or Meta Pixel. The standard HTML block install method won't work with these tools because WIX sandboxes HTML block elements in their own iframe, which prevents GTM from seeing widget events. This method places the widget script in Wix's main page context, where GTM can access it.
WARNING: Do not use a WIX HTML block element for this install. The script must be added through WIX Custom Code as described below.
Instructions
-
Log in to your WIX Dashboard and go to Settings → Custom Code.
-
Click + Add Custom Code in the top right.
-
Paste the following code into the code editor, replacing YOUR-TOOL-ID-HERE with your RoofQuote PRO® tool ID:
<script src="https://app.roofle.com/roof-quote-pro-embedded-widget.js?id=YOUR-TOOL-ID-HERE" async></script>
<style>
div:has(> #roof-quote-pro-embedded) {
height: auto;
pointer-events: all;
}
@media (max-width: 599px) {
#roof-quote-pro-embedded {
width: 86%;
margin: 0 auto;
}
}
</style> - Give the snippet a name (e.g., RoofQuote PRO Widget).
- Under Add Code to Pages, select the page(s) where you want to install the tool.
- Set Place Code in to Head.
- Click Apply to save.
- Next, open your Wix site editor and navigate to one of the pages you selected in step 5.
- Click Add Elements and search for Anchor.
- Drag the anchor onto the page at the position where you'd like the widget to begin. This line marks the top of the embedded instant quote tool.
- Name the anchor roof-quote-pro-embedded
- Drag another anchor onto the page just above the previously placed anchor.
- Name that anchor rqp-widget--roof-quote-pro
- Repeat steps 8–13 for any additional pages selected in step 5.
- Publish your site.