Skip to content
Last updated

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 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:

<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

<!-- 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.

Previous page
Next page