Back to Blog
Tutorial

How to add a roof estimate widget to your website in 5 minutes

Add the RoofSell roof estimate widget to WordPress, Wix, Squarespace or plain HTML in about 5 minutes, with exact dashboard steps and a fix-it checklist.

Tom Reyes·January 28, 2026·6 min read

Adding the RoofSell roof estimate widget to your website comes down to one line of code: copy the Widget Script from your Developer page and paste it into your site's footer. The paste takes about 5 minutes on any site builder. Your account needs a few things in place first, so this guide starts there and then covers WordPress, Wix, Squarespace and plain HTML.

Before you start: 3 things the widget needs

The widget only appears on your site when all three of these are true. If one is missing, the button stays hidden even when the code is on the page.

  1. An active subscription or trial. In the dashboard, open Billing and click Start 14-day free trial (returning accounts see Subscribe instead). You won't be charged until the trial ends, and you can cancel anytime.
  2. At least one product. You'll pick these in step 1.
  3. At least one allowed domain. You'll add it in step 2.

Step 1: Pick your products and prices

  1. Click Products in the sidebar.
  2. Browse the Pitch Roof Catalog, Flat Roof or My Catalog tabs and click Add on each product you want homeowners to see.
  3. In the Selected Products panel, click Customize on each product, set the Price Per Square to your own installed price and click Save Changes. A product without a price shows up in the widget without one.
  4. Drag the products into the order you want, then click Save Changes at the bottom of the panel.

Flat Roof products only appear in the widget when the homeowner marks a structure as flat, so you can offer both without confusing anyone.

Step 2: Turn on the widget and add your domain

  1. Click Developer in the sidebar. The page is called Developer Settings.
  2. In the Widget Plugin card, click the toggle. The badge changes from Disabled to Active, and the rest of the settings appear below.
  3. Under Allowed Domains, type your website's domain, such as yourroofingco.com. Leave off https:// and anything after the domain, such as /contact.
  4. If your site also loads at www.yourroofingco.com, click the plus button (Add another domain) and add that version too. The widget checks the exact domain, so the www and non-www versions count as two different domains. You can add up to 5.
  5. Click SAVE CHANGES under the domain list.

Only the account owner can change these settings. Team members see the page as view-only.

Step 3: Match the widget to your brand (optional)

  • Button Position: choose Top Left, Top Right, Left, Right, Bottom Left or Bottom Right. Left and Right show a vertical tab on the edge of the screen. The other four show a rounded button in the corner.
  • Button Colors: set the Background Color, Text Color and Accent Color. The accent color is used for slope borders, icons and the submit button inside the widget.
  • Widget Texts: change the Main Heading, Button / Tab Text and Panel Header Title. Turn on Deep Customization to edit the subtitle, search placeholder, submit button text and empty state text. Leave a field blank to keep the default wording.

Each section has its own SAVE CHANGES button. The Live Preview below shows a sample website with your button on it. Click the button to open the widget and try an address.

Step 4: Copy your Widget Script

Scroll down to Widget Script and click the copy icon in the corner of the code box. The code is a single line that looks like this, with your own Tool ID at the end:

<script src="https://roofsell.com/roof-sell-widget.js?id=your-tool-id" async></script>

Always copy it from the dashboard instead of typing it, so the ID is exact. Your Tool ID is also shown above the script if you ever need to give it to your web developer.

If you'd rather show the estimate tool inside a page than as a slide-in panel, use the Embedded iFrame code just below. It loads the same tool inline at 700 pixels tall, and the same allowed domain rule applies. A dedicated page like /free-roof-estimate works well for this.

Step 5: Paste the code into your website

The script belongs in the site-wide footer, so the button shows on every page. Here's where that setting lives in the common builders.

WordPress

  1. Install a header and footer code plugin if you don't have one already. WPCode is a common choice.
  2. Open the plugin's header and footer settings and paste the script into the footer box.
  3. Save, then clear your caching plugin if you use one, so visitors get the new version.

To show the button on one page only, edit that page, add a Custom HTML block and paste the script into it.

Wix

  1. In your site dashboard, open Settings and find Custom Code in the Advanced section.
  2. Click Add Custom Code and paste the script.
  3. Set it to load on all pages and place the code at the end of the body.
  4. Click Apply, then publish your site.

Wix only allows custom code on sites with a premium plan and a connected domain. Add that domain, without https://, to your Allowed Domains.

Squarespace

  1. Open Code Injection. Squarespace has moved it between versions, so look under Settings first and under Custom Code in the Pages panel if it isn't there.
  2. Paste the script into the Footer field.
  3. Click Save.

Code Injection isn't included on every Squarespace plan. If you can't find it anywhere, check your plan first.

Plain HTML or a custom-built site

  1. Open the HTML file for each page, or the shared footer template if your site uses one.
  2. Paste the script just before the closing </body> tag.
  3. Upload the changed files to your web host.

Other builders such as Webflow, Shopify and GoDaddy have a similar custom code or footer code setting. The same line goes there.

Step 6: Test the roof estimate widget on your live site

  1. Open your website in a private browser window so you're not looking at a cached copy.
  2. Find the button in the position you picked and click it. The estimate tool slides in from the side.
  3. Enter a real address, confirm the roof and its slope, and submit the form with your own name, email and phone number.
  4. Check your Dashboard. The test lead should be there with the status New and the Lead Source Widget, and you'll get a new lead email. Because you used your own email address, you'll also receive the quote PDF the homeowner would get.
  5. Open the test quote and click Delete when you're done, so it doesn't count in your Analytics.

Button not showing? Check these 5 things

  • The Widget Plugin badge on the Developer page says Active.
  • Your trial or subscription is active on the Billing page.
  • At least one product is saved on the Products page.
  • The domain in your browser's address bar matches an allowed domain exactly, with or without www.
  • The script is on the published site, not only in a draft, and your site cache has been cleared.

The Live Preview on the Developer page always works, even when your own site doesn't, so it can't confirm your setup is right. Test on your real domain.

For more detail, see the help article on embedding the widget on your website. To learn how the widget finds and measures each roof, read how satellite roof measurement works.