You change the widget colors and the position of the quote button on the Developer page of your dashboard. Every change shows up in a live preview first, so you can check it before it reaches your website.
Only the account owner can edit these settings. Sales reps see the same page in view-only mode.
How to change your widget colors
- Click Developer in the sidebar.
- Scroll to Button Colors.
- Set Background Color and Text Color for the quote button. Click a swatch to pick a color, or type a 6-digit hex code such as #1E59EB.
- Set Accent Color. Inside the widget it colors the roof slope outlines, the icons and the submit button.
- Check the live preview further down the page, then click SAVE CHANGES at the bottom of the card.
Reload your website after saving to see the new colors.
Picking the button position
Under Button Position you have six options. Left and Right place a vertical tab on the edge of the page, centered top to bottom. Top Left, Top Right, Bottom Left and Bottom Right place a rounded button in that corner. The quote panel slides in from the same side.
The position is saved with the same SAVE CHANGES button as the colors.
What the colors change, and what they don't
- Button position, background color and text color apply to the slide-out button added by the widget script. An inline iframe embed has no button, so only the accent color affects it.
- The accent color also shows up on buttons and highlights in the quote email and PDF your customers receive.
- Your company logo isn't shown inside the widget. It appears on quote emails and PDFs, and you upload it under Settings.
To change the words in the widget, such as the button label or the main heading, see Changing your widget text and labels. For help placing the widget on your site, read How to embed the widget on your website.