Lead Form Widget

Backend API + widget HTML embeddable pour collecter des leads via un formulaire et les synchroniser automatiquement avec systeme.io.

Architecture

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│  Widget HTML    │────▶│  Backend API    │────▶│  systeme.io     │
│  (embed iframe) │     │  (Express.js)   │     │  (API contacts) │
└─────────────────┘     │  + SQLite DB    │     └─────────────────┘
                        └─────────────────┘

• Widget : formulaire HTML/CSS/JS vanilla, embeddable via <iframe> ou <script> sur n'importe quel site
• Backend : API Express.js deployee sur Railway, stocke les leads en SQLite puis les envoie a systeme.io
• systeme.io : creation automatique du contact via l'API REST

Stack technique

Composant	Techno
Backend	Node.js + Express.js
Base de donnees	SQLite (via better-sqlite3)
Frontend widget	HTML/CSS/JS vanilla
Deploiement backend	Railway
API externe	systeme.io REST API

Structure du projet

lead-form-widget/
├── README.md                  # Ce fichier
├── docs/
│   ├── SYSTEMEIO-API.md       # Documentation API systeme.io
│   ├── DEPLOYMENT.md          # Guide de deploiement Railway
│   ├── WIDGET-INTEGRATION.md  # Guide d'integration du widget
│   └── DATABASE.md            # Schema et documentation DB
├── src/
│   ├── server.js              # Point d'entree Express
│   ├── routes/
│   │   ├── leads.js           # POST /api/leads — reception formulaire
│   │   └── health.js          # GET /api/health — healthcheck
│   ├── services/
│   │   ├── systemeio.js       # Client API systeme.io
│   │   └── database.js        # Service SQLite
│   ├── middleware/
│   │   ├── cors.js            # Config CORS pour le widget
│   │   └── validate.js        # Validation des donnees formulaire
│   └── db/
│       └── schema.sql         # Schema SQLite
├── widget/
│   ├── form.html              # Widget formulaire standalone
│   ├── form.css               # Styles du widget
│   ├── form.js                # Logique JS du widget
│   └── embed.js               # Script d'embed (snippet a copier)
├── .env.example               # Variables d'environnement
├── package.json               # Dependances Node.js
├── .gitignore                 # Fichiers ignores
└── railway.toml               # Config Railway

Variables d'environnement

Variable	Description	Requis
PORT	Port du serveur (default: 3000)	Non
SYSTEMEIO_API_KEY	Cle API systeme.io	Oui
ALLOWED_ORIGINS	Origines autorisees pour CORS (comma-separated)	Oui
DATABASE_PATH	Chemin vers le fichier SQLite (default: ./data/leads.db)	Non

Demarrage rapide

# 1. Cloner le repo
git clone https://github.com/gquthier/lead-form-widget.git
cd lead-form-widget

# 2. Installer les dependances
npm install

# 3. Configurer les variables d'environnement
cp .env.example .env
# Editer .env avec ta cle API systeme.io

# 4. Lancer le serveur
npm start

Endpoints API

POST /api/leads

Recoit une soumission de formulaire, stocke le lead en base, et l'envoie a systeme.io.

Request body :

{
  "email": "contact@example.com",
  "firstName": "Jean",
  "lastName": "Dupont",
  "phone": "+33612345678",
  "answers": {
    "question_1": "reponse 1",
    "question_2": "reponse 2"
  }
}

Response :

{
  "success": true,
  "leadId": 42,
  "systemeio": { "synced": true }
}

GET /api/health

Healthcheck pour Railway.

Response : { "status": "ok" }

Integration du widget

Ajouter ce snippet HTML sur n'importe quelle page :

<div id="lead-form-widget"></div>
<script src="https://YOUR_RAILWAY_URL/widget/embed.js"></script>

Voir docs/WIDGET-INTEGRATION.md pour les options de personnalisation.