Once you enable the EngagePro™ - Lead Widget in your platform (via Configuration Widget or API), your Clients will be able to customize how it looks and behaves, and add it to their website or marketing channels — without any development work.
Your Clients can fully control how the widget looks — both the Widget flow shown to homeowners and UI element that appears on their website.
Clients can configure the design of the entire EngagePro™ - Lead Widget flow.
They can brand and personalize it by:
- Uploading their logo
- Setting brand colors (buttons, links, background)
- Adding terms of use and privacy policy links
- Adding company information
- Updating first page title
They can also define certain calculation-related inputs:
All-In Asphalt Shingle Installation Price —
Your Clients can specify their average installation price per square for asphalt shingles.
This value is used to generate the estimated cost shown to homeowners during the flow.
Advanced Options —
Your Clients can adjust the percentages for material & waste, steepness and complexity to better match real project conditions and provide a more accurate roof estimate.
Price Range Presented —
Your Clients can specify the low and high estimate range to present an estimated cost range to the prospect.
Payments As Low As —
Your Clients can set the monthly payment factor allowing to calculate the lowest payment. The calculation can also be made using the rate and term if the monthly payment factor is unknown. These values are used to generate the Payments As Low As shown to homeowners during the flow.
| Parameter | Description | Example / Default |
|---|---|---|
| Header Logo | Logo displayed at the top | {{HEADER_LOGO_URL}} |
| Primary Color | Color of the primary buttons, QR-codes and titles | #696CFF |
| Secondary Color | Color of secondary buttons | #aaaaaa |
| Background Color | Background color under the hosted widget | #F5F5F9 |
| Card Background | Background color of the widget card | #ffffff |
| Text Color | Main text color | #22303EE6 |
| Link Color | Hyperlink color | #696CFF |
| Footer Logo | Small logo (favicon preferred) at the bottom | {{FOOTER_LOGO_URL}} |
| Footer Company Name | Footer company name | Company Name |
| Footer Privacy Policy URL | Link to privacy policy | {{PRIVACY_URL}} |
| Footer Terms of Use URL | Link to terms of service | {{TERMS_URL}} |
| Company Name | Company’s legal name | Company Name |
| Company Address | Company’s full physical address | 123 company address |
| Company Phone Number | Company’s contact phone number | 1234567890 |
| Company Email Address | Company’s contact email address | company@company.com |
| Company URL | Company's website URL | company.com |
| First Page Title | Title of the first page | Get Your Estimate in 30 Seconds! |
| Installation Price | Avg. install price per sq. for asphalt shingles | $400.00 |
| Standard Asphalt | Material & Waste adjustments with percentage-based premiums and waste | 0% |
| Slate or Tile | Material & Waste Adjustments with percentage-based premiums and waste | 30% |
| Metal | Material & Waste Adjustments with percentage-based premiums and waste | 20% |
| Other | Material & Waste Adjustments with percentage-based premiums and waste | 20% |
| Average | Steepness Adjustment with percentage-based premiums | 0% |
| Steep | Steepness Adjustment with percentage-based premiums | 5% |
| Very Steep | Steepness Adjustment with percentage-based premiums | 10% |
| Simple | Complexity Adjustment with percentage-based premiums | 0% |
| Moderate | Complexity Adjustment with percentage-based premiums | 10% |
| Complex | Complexity Adjustment with percentage-based premiums | 15% |
| Estimate Low Range | Price Range | 95% |
| Estimate High Range | Price Range | 125% |
| Monthly Payment Factor | Payment factor from the preferred lender, allowing to calculate the lowest payment | 0.01267 |
| APR | Rate offered by the preferred lender, allowing to calculate the lowest payment | 9% |
| Months | Term offered by the preferred lender, allowing to calculate the lowest payment | 120 |
Clients can fully customize the look and behavior of the UI element (button or banner) that appears on their websites. The UI element appears on their websites if the Widget Script is installed based on the instruction provided below.
They can adjust:
- Type: Button, banner or custom
- Position on screen: Bottom right, left, top, etc.
- Colors: Background and text
- Text: The call-to-action and banner description
- Size: Small, medium, or large
| Parameter | Description | Values / Default |
|---|---|---|
| Element Type | Element type | button | banner | custom Default: button |
| Element Position | Element placement on page | Depends on element type:button: bottom_right | bottom_left | side_right | side_leftbanner: top | bottomcustom: - Default: side_right |
| Element Size | Element size | small | medium | large Default: medium |
| Button Text | CTA text shown on the element | Get Your Instant Estimate (default) |
| Button Text Color | CTA text color | #FFFFFF (default) |
| Button Background Color | Background color for button and banner text (if banner type is applied) | #696CFF (default) |
| Banner Text | Banner text (beside CTA text) | Check your roof estimate in 60 seconds (default) |
| Banner Background Color | Banner background color | #F5F5F9 |
After customization, your Clients can launch the widget using no-code or low-code options:
- Clients use Quantiv-hosted QR code and direct link
- Clients just copy and share - they are already live
- Client’s end users are redirected to the widget on the Quantiv domain
- Widget branding will reflect the Client’s configuration
✅ Best for: Clients without a website or technical team
Here’s how your Clients can install the widget on their website:
1. Copy the code snippet
Grab the provided widget script after widget creation.
2. Paste into website
Insert the script at the end of <body> or in “Footer code” section of builders (e.g. Webflow, Wix, Tilda).
3. If using custom element
Create a custom UI element and call the widget with the following function:
<button onclick="roofEstimateOpen()">Open</button>Or assign roof-estimate-open class to the element (you can create multiple elements with the same class).
4. Save & publish
Deploy changes to the production environment.
5. Test Widget
Refresh the page and check that the UI element appears correctly and EngagePro™ - Lead Widget flow works as expected.
⚠️ Note for Low-code Website Embedding
If your Clients are using the Low-code Website Embedding option, they must also provide the URL (domain) of the websites where the widget script will be installed.
These domain(s) can be added:
- via the Quantiv API
- through the Configuration Widget interface
It depends on which integration approach you use.
This requirement ensures that the widget script can only be executed on authorized domains, which provides an additional layer of security.
With just a few simple steps, your Clients can transform their website or marketing channels into a powerful lead generation engine.
They’ll be able to fully customize both the look and behavior of the widget — from choosing how it appears to matching it with their brand. And thanks to flexible installation options, they can go live in minutes — with or without a website.
By enabling this flow, you’re giving your Clients a professional, on-brand tool that delivers instant value to homeowners — and high-quality leads to their business.
✅ No dev team required. No friction. Just results.