@alfredo-ai/leads-widget

Embeddable leads widget with optional SMS validation, designed for Alfredo AI integration. Built with React, Material UI, Redux, and TailwindCSS.

Features

• Multi-step lead form (location, characteristics, personal data, optional SMS validation)
• Multi-language support (Portuguese, English, Spanish)
• Google Maps integration for location selection
• Price interval / estimation display
• Optional SMS verification flow
• Theming via primaryColor and backgroundColor
• Lifecycle callbacks: onSuccess, onError, onStepChange

Installation

Via npm (not tested)

npm install @alfredo-ai/leads-widget

Via script tag (CDN)

No install required. Load the UMD bundle directly (see Script tag usage below).

Usage

Script tag (UMD)

1. Add a container element where the widget should render:

<div id="leads-widget-root"></div>

2. Load the widget script and styles:

<script src="https://unpkg.com/@alfredo-ai/leads-widget/dist/widget.umd.cjs"></script>
<link rel="stylesheet" href="https://unpkg.com/@alfredo-ai/leads-widget/dist/style.css" />

3. Initialize the widget:

<script>
  window.initLeadsWidget({
    token: "YOUR_ALFREDO_LEADS_TOKEN",
    container: "leads-widget-root",
    origin: "pt",
  });
</script>

NPM / ESM (React or any bundler)

Import the package so that initLeadsWidget is attached to window, then call it once the container element is in the DOM:

import "@alfredo-ai/leads-widget";
import "@alfredo-ai/leads-widget/style.css";

window.initLeadsWidget({
  token: "YOUR_ALFREDO_LEADS_TOKEN",
  container: "leads-widget-root",
  origin: "pt",
});

Example in a React component:

import { useEffect } from "react";
import "@alfredo-ai/leads-widget";
import "@alfredo-ai/leads-widget/style.css";

function LeadsWidget() {
  useEffect(() => {
    window.initLeadsWidget({
      token: "YOUR_ALFREDO_LEADS_TOKEN",
      container: "leads-widget-root",
      origin: "pt",
    });
  }, []);

  return <div id="leads-widget-root" />;
}

Configuration options

| Option | Type | Default | Description | | ----------------- | ------- | ----------- | ------------------------------------------------- | | container | string | "root" | DOM id of the element where the widget mounts. | | origin | string | "pt" | Origin/locale key ("pt", "es"). | | userID | string | null | Optional user identifier. | | lang | string | null | Preferred language (pt, en, es). | | token | string | - | Alfredo leads API token. | | showHeader | boolean | true | Whether to show the widget header. | | primaryColor | string | "#009de0" | Primary theme color (hex). | | backgroundColor | string | "#f7f7f7" | Background color (hex). | | onSuccess | function | () => {} | Callback when lead is submitted successfully. | | onError | function | () => {} | Callback when submission fails; receives the error.| | onStepChange | function | () => {} | Callback when user navigates steps; receives new step number.|

Callbacks

onSuccess

Called when the lead is successfully submitted (either after the initial API submit or after SMS verification).

window.initLeadsWidget({
  token: "YOUR_ALFREDO_LEADS_TOKEN",
  container: "leads-widget-root",
  onSuccess: () => {
    console.log("Lead submitted successfully");
    // e.g. redirect, show thank you, track analytics
  },
});

onError

Called when lead submission or SMS validation fails. Receives the error object from the API.

window.initLeadsWidget({
  token: "YOUR_ALFREDO_LEADS_TOKEN",
  container: "leads-widget-root",
  onError: (error) => {
    console.error("Lead submission failed", error);
    // error?.data?.detail may contain API error details
  },
});

onStepChange

Called when the user navigates between form steps (forward or back). Receives the new step number (1-based).

window.initLeadsWidget({
  token: "YOUR_ALFREDO_LEADS_TOKEN",
  container: "leads-widget-root",
  onStepChange: (stepNumber) => {
    console.log("User is on step", stepNumber);
    // e.g. track funnel analytics, update progress in parent UI
  },
});

License

MIT. See LICENSE for details.