# What Your Clients Can Do with EngagePro™ - Lead Widget

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.

## 🎨 Step 1: Customize the Widget’s Appearance

Your Clients can fully control how the widget looks — both the **Widget flow** shown to homeowners and **UI element** that appears on their website.

### 🎨 Customizing the Widget Flow Appearance

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.


| Parameter | Description | Example / Default |
|  --- | --- | --- |
| Header Logo | Logo displayed at the top | `{{HEADER_LOGO}}` |
| 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}}` |
| 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` |


### 🎨 Customizing the UI Element

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_left``banner`: `top` | `bottom``custom`: - **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 or 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` |


## 🔌 Step 2: Make the Widget Available to Homeowners

After customization, your Clients can launch the widget using no-code or low-code options:

### 🖱️ Option 1: No-code Launch

- 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

### 💻 Option 2: Low-code Website Embedding

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:


```html
<button onclick="quantivWidget['roof-estimate'].open()">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](/api/openapi)
- through the [Configuration Widget](/leadgenwidget/createwidget) 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.