RoofQuote PRO Installation for Specific Website Builders

Overview:

• Wordpress

• WIX

• Squarespace

• GoDaddy

• Hubspot
  

• Google Sites

• NextJs/Vercel

• Weebly

• Shopify

WORDPRESS

WIX

SQUARESPACE 

GODADDY WEBSITE BUILDER

HUBSPOT

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

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" />

WEEBLY

SHOPIFY