The Developer page gives you 2 codes. The Widget Script adds a floating button that opens the estimate form in a slide-in panel. The Embedded iFrame places the form inline, inside a page. Floating button vs inline embed comes down to one question: should the quote follow visitors around your whole site, or live on one page?
How the floating button works
- The button stays on screen as visitors scroll, on every page that loads the script.
- You pick its spot under Button Position: 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 others show a rounded button in the corner.
- Clicking it slides the estimate panel in from the left or right. Visitors close it with the × button, the Esc key, or a click outside the panel.
- On phones, the panel fills the screen.
- You control the button's Background Color, Text Color, Button / Tab Text and Panel Header Title.
How the inline embed works
- The form sits in the page like any other content, full width and 700 pixels tall by default. Change the height value in the code to fit your layout.
- It suits a dedicated free estimate page, or a landing page for ads.
- Button position and button colors don't apply. The Accent Color and widget texts like Main Heading and Submit Button Text do.
Floating button vs inline embed: which should you use?
Use the floating button if you want a quote option on every page with no layout work. Use the inline embed if you have a page built around estimates.
You can also run both: the script site-wide and the iframe on your estimate page. Both send leads to the same Dashboard with the same roof data, and both only show on your allowed domains.
Setup steps are in how to add the roofing estimate widget, and colors and texts are covered in widget branding.