Documentation LutinGénie - Guide d'intégration et configuration

Démarrage Rapide

⚡ En 2 minutes

Votre assistant magique sera opérationnel sur votre site web en moins de 2 minutes. Juste deux lignes de code !

1Ajoutez le Script

Choisissez le framework que vous souhaitez utiliser :

<!-- Ajoutez avant la fermeture </body> -->
<script src="https://cdn.lutingenie.com/lutingenie-widget.js"></script>
<script>
	LutinGenie.init({
		apiKey: "VOTRE_CLE_API_ICI"
	});
</script>

Pour tous les sites web statiques. Ajoutez directement dans votre HTML.

C'est tout ! Aucun fichier CSS requis, aucun outil de build, aucun conflit de style avec votre site existant.

2Obtenez votre Clé API

1. Accédez à votre portail client LutinGénie
2. Naviguez vers la section "Clés API"
3. Générez une nouvelle clé pour votre domaine
4. Configurez les paramètres de votre domaine
5. Sauvegardez votre clé de manière sécurisée

✨Et voilà ! Votre installation est terminée. Vous pouvez maintenant laisser LutinGénie s'occuper de vos visiteurs — n'oubliez pas de lui apprendre un peu sur votre entreprise !

Installation Détaillée

🌐 Compatibilité Universelle

Notre widget CDN fonctionne automatiquement sur toutes les plateformes :

✅ React (toutes versions)✅ WordPress✅ Wix, Squarespace✅ HTML/JS Vanilla✅ Vue, Angular, Svelte✅ N'importe quel CMS

Méthode CDN (Recommandée)

Pour tous les sites web. Utilise des styles inline et l'isolation CSS pour éviter les conflits.

Installation de base

<script src="https://cdn.lutingenie.com/lutingenie-widget.js"></script>
<script>
	LutinGenie.init({
		apiKey: "VOTRE_CLE_API_ICI"
	});
</script>

Avec options personnalisées

LutinGenie.init({
	apiKey: "votre-cle-api",
	position: "bottom-right",        // Position du widget
	expandDirection: "auto",         // Direction d'expansion
	zIndex: 999999                   // Z-index personnalisé
});

Sécurité des Clés API

🔒 Verrouillage par Domaine

Chaque clé API est liée de manière permanente à un domaine spécifique pour une sécurité renforcée.

• Une clé par domaine : Chaque clé ne fonctionne que sur son domaine enregistré

• Analytiques séparées : Données propres et spécifiques par domaine

• Prévention des abus : Empêche l'utilisation non autorisée

• Support localhost : Patterns de développement automatiquement autorisés

Support Localhost Automatique

Votre clé de production fonctionne automatiquement sur ces patterns de développement :

✅ localhost, localhost:3000, localhost:8080
✅ 127.0.0.1:3000, ::1, 0.0.0.0:3000
✅ 192.168.x.x:port (réseaux privés)
✅ Domaines .dev, .local, .test, .localhost
✅ Domaines contenant "localhost", "staging", "dev", "test"

Pourquoi c'est Important

• Clés divulguées inutiles : Même si votre clé API apparaît dans du code public, elle ne peut pas être utilisée sur d'autres domaines

• Aucune valeur de revente : Les clés volées n'ont aucune valeur pour les acteurs malveillants

• Déploiement simplifié : Vous pouvez déployer les clés en toute sécurité dans du code côté client

• Analytiques propres : Toute utilisation provient définitivement de votre domaine légitime

Configuration

Options Disponibles

LutinGenie.init({
	apiKey: "ltg_abc123xyz789...",     // Requis
	position: "bottom-right",          // Optionnel
	expandDirection: "auto",           // Optionnel
	containerId: "widget-container",   // Optionnel
	zIndex: 999999                     // Optionnel
});

apiKey (requis)

Votre clé API unique du portail client (verrouillée par domaine pour la sécurité).

Format : Commence par "ltg_" suivi d'une chaîne alphanumérique unique.

position (optionnel)

Où le widget apparaît sur votre page.

"bottom-right" (défaut)"bottom-left"

expandDirection (optionnel)

Comment la fenêtre de chat s'ouvre. "auto" détecte automatiquement les bords.

"auto" (défaut)"up""down""left""right"

zIndex (optionnel)

Contrôle l'ordre d'empilement. Augmentez si le widget est masqué par d'autres éléments.

Défaut : 999999 - généralement pas besoin de le modifier.

Intégration par Framework

React & Next.js

Ajoutez à votre app/layout.tsx (Next.js) ou public/index.html (CRA)

<script src="https://cdn.lutingenie.com/lutingenie-widget.js"></script>

WordPress

Ajoutez au footer.php de votre thème ou via un plugin

<script src="https://cdn.lutingenie.com/lutingenie-widget.js"></script>

Vue.js

Ajoutez à votre index.html ou chargez dans mounted()

<script src="https://cdn.lutingenie.com/lutingenie-widget.js"></script>

HTML/JS Vanilla

Ajoutez directement avant la fermeture </body>

<script src="https://cdn.lutingenie.com/lutingenie-widget.js"></script>

Variables d'Environnement par Plateforme

# Next.js
NEXT_PUBLIC_LUTINGENIE_API_KEY=ltg_abc123...

# Create React App
REACT_APP_LUTINGENIE_API_KEY=ltg_abc123...

# Vite
VITE_LUTINGENIE_API_KEY=ltg_abc123...

# Nuxt.js
NUXT_PUBLIC_LUTINGENIE_API_KEY=ltg_abc123...

🔧 Problèmes Spécifiques à Next.js et Solutions

❌ Problème: "Event handlers cannot be passed to Client Component props"

Cette erreur apparaît quand vous essayez d'utiliser onReady dans un Server Component.

// ❌ Ne fonctionne pas dans un Server Component
<Script onReady={() => { /* code */ }} />

✅ Solution: Créez un Client Component séparé avec "use client"pour gérer les event handlers, comme montré dans l'exemple Next.js ci-dessus.

💡 Recommandation: Simplicité avant tout

Évitez les implémentations trop complexes avec gestion d'état, vérifications multiples, ou composants imbriqués. Un simple Client Component avec onReady suffit dans 99% des cas.

⚠️ À propos de dangerouslySetInnerHTML

Cette approche est techniquement sûre pour charger LutinGénie car:

• Le contenu provient de variables d'environnement contrôlées
• Aucune saisie utilisateur dynamique
• Script de confiance depuis notre CDN

Cependant, utilisez le Client Component quand c'est possible pour une meilleure maintenabilité.

Dépannage

Le widget n'apparaît pas ?

• Vérifiez que votre clé API est correcte et active
• Ouvrez la console du navigateur pour voir les erreurs
• Vérifiez qu'aucun bloqueur de publicité n'interfère
• Assurez-vous que le script se charge après le DOM

Erreurs courantes

"Invalid API key"

Vérifiez votre portail client ou contactez Chargement...

"Domain mismatch"

Contactez Chargement... pour les changements de domaine

"LutinGenie is not defined"

Le script doit se charger avant l'appel à LutinGenie.init()

Conflits de Z-Index

Si le widget est masqué par d'autres éléments :

LutinGenie.init({
	apiKey: "ltg_abc123...",
	zIndex: 9999999  // Plus élevé que vos éléments
});

Support & Aide

💬 Chat en Direct

Utilisez le widget LutinGénie sur cette page pour poser vos questions en temps réel.

Disponible en bas à droite

📧 Support Email

Pour les questions techniques détaillées ou les demandes de personnalisation.

Chargement...

❓ Questions Fréquentes

Consultez notre FAQ pour trouver rapidement des réponses aux questions courantes.

Voir la FAQ →

🆘 Support Urgent

Pour les problèmes critiques affectant votre service client.

Chargement...

Des questions ?

Notre équipe technique est disponible pour vous accompagner

Chargement...

Réponse sous 24h • Lundi-Vendredi 9h-18h