Skip to main content

Customize Your Branding For Optimal Results

Go to **Settings → General → Widget Settings → Branding**, customize colors, fonts, and buttons for background, text, icons, and controls, preview changes in real time, then click **Save Changes**.

S
Written by Support Team
Updated over a month ago

Roof Quote PRO™ is fully white-labeled with a ton of custom options to suit your company's brand and website experience.

Requirements:

  • Roof Quote PRO™ active subscription

  • Admin user access

Overview:

Set up your tool settings including colors, text, buttons, emails, and display options. Follow the Best Practices provided in this article for optimal results and higher lead generation.

Instructions:

  1. To start, login to your portal and go to the Settings icon in the top right corner.

  2. Choose General from the menu. This will take you to the Widget Settings page.

  3. Select Branding from the Feature dropdown menu.

PRO TIP: Preview your setting changes in real time from the example to the right. Click Save Changes to preview the full-page widget (embedded version) or floating widget (slide-out version) of your instant quote tool.

Background Color

  1. Expand the Background section

  2. Set any color for the background of your instant quote tool

    1. Option 1 - Enter the color hex code

    2. Option 2 - Manually select the color by clicking on the color square, then use the slider to the desired color range and use your curser to select your color
      You can also adjust the opacity

  3. Save your changes.

HEADS UP! Setting the opacity lower than 90% may decrease lead conversions as it will make your form screen difficult to read since it overlays your initial screen.

Best Practices for Background Color

  • Most companies use a white background or match the background color to their website’s design.

  • Ensure your background color provides strong contrast with your main and secondary text, especially headings.

  • Avoid using highly saturated colors (e.g., bright green or red), as they can be distracting to users.

Text, Icons, and Illustrations

  1. Expand the Text, Icons, and Illustrations section

  2. Set the color and font for Titles, Main Text, and Secondary Text

    1. Titles include the header text "What will my roof cost," structure names, recommended products header, product names, and financing options/price

    2. Main Text includes the text under your header, address, text under the map, selected structure slope, product descriptions, instant quote price, and package details

    3. Secondary Text includes unselected structure slopes and product description labels

  3. Set the color of your Icons

    1. Icons include the "x" that clears the address, trash icons to delete structures, and tooltips

  4. Set the fill and outline colors for your Roof Borders

    1. Fill Color is for overlay color for included roof structures on the map

    2. Outline Color is for lines that cover excluded roof structures on the map and the small outline to roof overlays

  5. Set the colors and corner rounding for Tooltip and Map Controls

    1. Fill Color is for map buttons and backgrounds of the roof names on the map

    2. Outline Color is for outlining the roof names on the map and boxes for structure cards and slope selection

    3. Corner Rounding changes the shape to the buttons and roof name boxes on the map - a higher number makes them more round, lower number more rectangular

    4. Font Color is for the roof name text and zoom icons on the map

  6. Set the selected and unselected colors for Illustration (Slope Preview)

    1. Selected color is for included roofs and selected slope illustrations

    2. Unselected color is for excluded roofs and unselected slope illustrations

  7. OPTIONAL: Change the Title & Example Text of your widget

    1. Edit Title to change the text of your headline

      1. By default, it is "What Will My Roof Cost?"

    2. Edit Example Text to change the supporting text under the headline

      1. By default, it is "Enter your street address to get an accurate estimate instantly"

  8. Save your changes.

Best Practices for Text, Icons, and Illustrations:

  • Limit the use of colors to 3–4 for text, icons, and illustrations.

  • Use text colors that match your website’s font colors, or choose neutral tones like dark gray or white (for dark backgrounds).

  • Avoid using bright or overly saturated colors for icons.

  • Set the Roof Borders’ fill and outline colors to match your button colors (in the Controls section).

  • Use white as the fill color for Tooltips, and match their outline color to the Roof Borders’ outline.

  • Set the Tooltip font color to match your main or secondary text.

  • Align the Corner Rounding with your website’s button corner radius for consistency.

  • Use a darker shade for selected Illustration colors compared to unselected ones.

NOTE: "What Will My Roof Cost?" has been proven to produce good conversion results, so be sure to compare your conversion performance if you change it (run a/b testing). Keep example text just as simple and straightforward if you change it.

Controls

  1. Expand the Controls section

  2. Set the colors and font attributes for your Main Button.

    1. The Fill Color is the main color of the button

    2. The Outline Color is used to outline the button. Use the same color as the fill to show no distinguishing button outline (recommended)

    3. Corner Rounding changes the shape of your button

    4. The Font, Font Weight, Font Size, and Font Color are for the button text.

    5. The Main Button includes both call-to-action buttons (Product "Call to Action" and Custom Financing), selected color outline, and the "See My Price" and "Show My Price" buttons shown before the quotes generated.

  3. Set the colors and font attributes for your Secondary Button.

    1. The Secondary Button includes the "Edit Roofs" and "Start Over" buttons.

    2. The attributes follow the same rules as your Main Button explained above.

  4. Set the colors and corner rounding for the Checkbox shown on structure cards

    1. The fill and outline colors are for when a checkbox is checked, which indicates the roof structure is included in the quote

  5. Save your changes.

WARNING: If you change the Product Call-To-Action, ensure it correlates with the next step in the widget process (the potential client is sent a quote and shown the Thank You Screen)

Best Practices for Controls:

  • Use the same colors and font you set in the Text, Icons, and Illustrations section.

  • Match the Main Button fill color to the other buttons on your website and/or the Roof Borders fill color.

  • Use the same color for the Main Button fill and outline, or keep the outline color very similar to the fill color (avoid strong contrast).

  • Make sure the Main Button font color contrasts well with the fill color so the text is easy to read (e.g., use white if the fill color is dark).

  • Avoid using highly saturated colors for the Main Button font, such as bright yellow or green.

  • Set the Secondary Button fill color to white or a very light color. For the outline color, use the same color as the Main Button fill.

  • Use the same corner rounding value for both Main and Secondary Buttons.

  • Set the Checkbox fill and outline colors to match, and use the same color as your Main Button.

Good CTA Examples:

  • Email My Quote

  • Book Inspection

  • I'm Interested

  • Next Step

  • Talk To A Pro

  • Get Proposal

  • Find Out More

Product Details

Clicking this button sends the instant quote for that specific product to the contact's email they entered in the form step, and it opens a Thank You Screen.

  1. Select Product Details from the Feature dropdown menu located at the top of the Widget Tool Settings screen

  2. Edit the text of the Main "Call to Action" Button. Max character count is 18

    1. By default, the text for the Product Details "call to action" button is "Send me details"

Screenshot 2025-07-30 at 11.33.13

  1. Save your changes.

Did this answer your question?