Documentation

Guide complet pour intégrer le widget SolarGen sur votre site et configurer votre simulateur solaire 3D.

Installation

Recommandé

Méthode 1: Script embed

La méthode la plus simple. Le script s'occupe de tout : chargement optimisé, redimensionnement automatique et communication avec votre page.

<!-- SolarGen Widget --><scriptsrc="https://widget.solargen.app/embed.js"data-org="votre_organization_id"data-theme="dark"data-lang="fr"async></script><div id="solargen-widget"></div>

Attributs disponibles

Attribut	Requis	Défaut	Description
`data-org`	Oui	-	Votre identifiant organisation (visible dans le dashboard)
`data-theme`	Non	`dark`	Thème du widget : `light` ou `dark`
`data-lang`	Non	`fr`	Langue : `fr` ou `en`
`data-container`	Non	`solargen-widget`	ID du conteneur HTML où injecter le widget
`data-height`	Non	`700px`	Hauteur du widget (CSS valide)

Méthode 2: iFrame

Alternative pour une isolation complète du widget. Utile si vous avez des contraintes CSP strictes.

<!-- SolarGen Widget (iframe) --><iframesrc="https://widget.solargen.app/widget/votre_organization_id"width="100%"height="700"frameborder="0"allow="geolocation"style="border: none; border-radius: 12px;"></iframe>

Important : L'attribut allow="geolocation" est requis pour la géolocalisation automatique de l'utilisateur.

Où trouver votre Organization ID ?

Connectez-vous à votre dashboard SolarGen, puis accédez à Widget → Code d'intégration. Votre org_id est affiché dans le code généré et ressemble à : org_a1b2c3d4e5f6

Configuration

Personnalisez entièrement l'apparence et le comportement du widget depuis votre dashboard. Toutes les modifications sont appliquées en temps réel sur votre site.

Personnalisation visuelle

Couleur primaire

Couleur principale appliquée aux boutons, liens et éléments interactifs. Défaut : #FFB800

Couleur secondaire

Couleur d'arrière-plan et accents secondaires. Défaut : #1A1A1A

Logo personnalisé

Uploadez votre logo (PNG ou SVG, max 1MB) pour remplacer l'icône par défaut.

Badge "Powered by"

Masquez le badge SolarGen avec le plan Business ou Enterprise.

Personnalisation des textes

Paramètre	Valeur par défaut	Description
`widget_title`	"Simulation Solaire"	Titre affiché dans l'en-tête du widget
`cta_text`	"Voir mes économies"	Texte du bouton principal d'action

Paramètres de calcul

Ajustez les paramètres utilisés pour calculer les économies et le ROI affichés à vos prospects.

Paramètre	Défaut	Plage	Description
`panel_capacity_wc`	400 Wc	100 - 800	Puissance nominale par panneau
`installation_cost_per_wc`	2.5 €/Wc	0.5 - 5	Coût moyen par watt-crête installé (pose incluse)
`electricity_price_kwh`	0.25 €/kWh	0.1 - 0.5	Tarif électricité (TTC moyen France)
`annual_production_factor`	1100 kWh/kWc	800 - 1500	Production annuelle selon région (Nord: 900, Centre: 1100, Sud: 1300)

Domaines autorisés

Par sécurité, le widget ne fonctionne que sur les domaines que vous avez explicitement autorisés. Ajoutez tous vos domaines (production, staging, etc.) dans votre dashboard.

# Exemples de domaines autorisésmon-site.frwww.mon-site.frstaging.mon-site.frlocalhost:3000  # Pour le développement local

API Reference

Le widget communique avec l'API SolarGen pour récupérer sa configuration et tracker les simulations. Ces endpoints sont publics mais liés à votre org_id.

GET/api/widget/config

Récupère la configuration du widget pour une organisation (branding, couleurs, paramètres de calcul).

Paramètres

Paramètre	Type	Description
`org_id`	string	Identifiant de l'organisation (requis)

Exemple de réponse

{
  "organization_id": "org_a1b2c3d4e5f6",
  "organization_name": "Solar Pro Install",
  "branding": {
    "primary_color": "#FFB800",
    "secondary_color": "#1A1A1A",
    "logo_url": "https://...",
    "widget_title": "Simulation Solaire",
    "cta_text": "Voir mes économies",
    "hide_badge": false
  },
  "calculations": {
    "panel_capacity_wc": 400,
    "installation_cost_per_wc": 2.5,
    "electricity_price_kwh": 0.25,
    "annual_production_factor": 1100
  },
  "allowed_domains": ["mon-site.fr", "www.mon-site.fr"],
  "plan": "pro",
  "quota_limit": 500
}

GET/api/widget/check-quota

Vérifie si l'organisation a encore du quota de simulations disponible ce mois-ci.

Exemple de réponse

{
  "organization_id": "org_a1b2c3d4e5f6",
  "plan": "pro",
  "usage": 127,
  "limit": 500,
  "remaining": 373,
  "percent_used": 25,
  "quota_exceeded": false,
  "warning": false
}

POST/api/widget/track-simulation

Appelé automatiquement par le widget après chaque simulation pour incrémenter le compteur d'utilisation.

Corps de la requête

{
  "organization_id": "org_a1b2c3d4e5f6",
  "simulation_data": {
    "lat": 48.8566,
    "lng": 2.3522,
    "timestamp": "2026-02-03T14:30:00Z"
  }
}

Exemple de réponse

{
  "success": true,
  "usage": 128,
  "limit": 500,
  "remaining": 372
}

Événements JavaScript

Le widget émet des événements personnalisés que vous pouvez écouter pour intégrer SolarGen avec votre analytics ou CRM.

Événements disponibles

Événement	Description
`solargen:simulation`	Émis quand une simulation est terminée (contient les résultats)
`solargen:lead`	Émis quand un lead soumet ses coordonnées
`solargen:error`	Émis en cas d'erreur (quota dépassé, erreur réseau, etc.)

Exemple d'écoute des événements

// Écouter les leads capturéswindow.addEventListener('solargen:lead', function(event) {const lead = event.detail;console.log('Nouveau lead:', lead);// Envoyer à votre CRM, Google Analytics, etc.gtag('event', 'lead_captured', {email: lead.email,address: lead.address});});// Écouter les simulations terminéeswindow.addEventListener('solargen:simulation', function(event) {const data = event.detail;console.log('Simulation:', data.annualProduction, 'kWh/an');});

API JavaScript

Le script embed expose un objet window.SolarGen pour un contrôle programmatique du widget.

Méthodes disponibles

SolarGen.load(options)

Charge ou recharge le widget programmatiquement avec de nouvelles options.

SolarGen.load({orgId: 'org_nouveau_id',container: 'mon-conteneur',height: '800px'});

SolarGen.postMessage(type, payload)

Envoie un message à l'iframe du widget pour déclencher des actions.

// Exemple: Pré-remplir une adresseSolarGen.postMessage('setAddress', {address: '10 rue de la Paix, 75002 Paris'});

Besoin d'aide pour l'intégration ?

Notre équipe technique est disponible pour vous accompagner.

Contacter le support Réserver un call technique