# Provide EngagePro™ - Lead Widget to Your Clients

Quantiv offers CRM and App Providers two easy ways to enable their Clients to start using the EngagePro™ - Lead Widget.

## 🧰 How to Create Widget

> **Note:**
Whether you're using the Configuration Widget or the Quantiv API to create a widget, make sure to:
- Use **sandbox API keys** when creating widgets for testing purposes
- Use **production API keys** when creating widgets for live, production use



### 🔹 Option 1: Quantiv API

If using the Quantiv API, CRM and App Providers allow their Сlients to create, activate, and manage their widgets via the API from UI/UX designed and hosted by the provider.
This approach gives full backend control and customization.

**API Response includes:**

- **Widget script** — renders a UI element (e.g., button or banner) that the CRM or App Provider’s Сlient will place to trigger/open the EngagePro™ - Lead Widget flow
- **QR codes and direct links:**
  - **Hosted QR code and link** – opens the full widget flow on a domain hosted by Quantiv
  - **On-site QR code and link** – opens the widget flow as an overlay popup on the Сlient’s website (if installed)


👉 Check out the [Quantiv API documentation](/api/openapi)  for more details.

### 🔹 Option 2: Configuration Widget (UI-based, no API required)

CRM or App Providers can integrate a script that opens a configuration popup within your app.
Your Clients use this interface to create, activate, and manage their widgets in just a few clicks.

#### 🎯 Why Use This Method?

- 🕒 **Save development time** — no need to build or style UI from scratch
- 🎨 **Maintain your brand** — fully customizable colors make the widget look native
- 🔌 **Simplify integration** — skip the API and launch via script
- 🧩 **Embed seamlessly** into your own platform or Client-facing tools


#### 🚀 How It Works

Quantiv provides a **Configuration Widget script** that renders an adaptive UI overlay popup inside your platform.
This popup allows your Clients to create, configure, and manage their EngagePro™ - Lead Widget — without needing to use the API.

**Inside the overlay, your Clients can:**

- Customize widget flow branding (colors, logos, terms/privacy links)
- Set up rendered UI element behavior


**They will instantly receive:**

- An **installation script** to embed the widget on their website
- **Direct links** to:
  - A hosted version of the widget (Quantiv domain)
  - Their own site (if the widget is installed)
- **QR codes** for offline/field marketing


This gives your platform a turnkey, white-labeled experience that feels fully integrated — without backend development.

### 🛠 Configuration Widget Integration Flow

#### Step 1: Receive the Script

Quantiv will send you **2 Configuration Widget scripts**:

- One for the **Production** environment
- One for the **Sandbox** environment


You can customize the appearance of the Configuration Widget using these parameters:

- **Primary Color**
  - Sets the color of the primary buttons and titles
- **Background Color**
  - Sets background color of the text areas
- **Text Color**
  - Sets the color of the main text


> **Note:**
The **Card Background Color** is defaulted to **#ffffff** and can not be changed.


#### Step 2: Create the UI Trigger

Create a button, link, or other UI element in your app or Client’s dashboard that will trigger the popup.

#### Step 3: Adjust Script Trigger

Link the script to your trigger by assigning `roof-estimate-setup-open` class to the element (you can create multiple elements with the same class) or adjust the element to call the following function:


```html
<button onclick="quantivWidget['roof-estimate-setup'].open()">Open</button>
```

#### Step 4: Pass the `data-contractor-reference-id` Parameter

Pass the UUID of your Client into the `data-contractor-reference-id` parameter  when initializing the Configuration Widget script — this identifies which Client is creating the widget.

#### Step 5: Deploy to Sandbox

Add the provided **Test Configuration Widget script** to your application.
Ensure it's called correctly and loads on user interaction.

#### Step 6: Test Configuration Script

Verify the user experience before going live.

#### Step 7: Deploy to Production

After successful testing, replace the test script with the **Production script** and go live.

**🧪 Example Script Snippet**


```html
<!-- Quantiv Configuration Script Example -->
<script
src="https://quantiv.nyc3.cdn.digitaloceanspaces.com/widgets/widget.min.js"
data-reference-id="provided-id"
data-contractor-reference-id="your-contractor-reference-id"
data-widget-type="roof-estimate-setup"
data-full-page="false"
></script>
```

With Quantiv, you can deliver a fully branded, high-converting lead generation experience to your Сlients — with minimal development effort.

Whether you choose the no-code **Configuration Widget** or the flexible **API-based integration**, the EngagePro™ - Lead Widget can be embedded seamlessly into your platform and deployed quickly — no complex setup required.