Retour à l'aperçu
Widgets intégrables
Placez des widgets de votre site comme embeds sur des domaines externes. Gérez les slots de widgets et configurez les domaines autorisés.
Que sont les Widgets intégrables ?
Les Widgets intégrables vous permettent de placer certaines parties de votre site web comme widgets autonomes sur des sites externes. Pensez à un widget d'avis sur un site partenaire, un formulaire de réservation sur une page de destination externe, ou votre chatbot sur un portail partenaire.
Widgets disponibles pour l'intégration :
• Agent vocal IA — Widget vocal pour le contact client
• Chatbot — Widget de chat IA avec historique de conversation et transfert au support
• Avis — Notes et étoiles
• Menu — Catégories, articles et allergènes
• Réservations — Planifier des rendez-vous
• Réservations de table — Réserver des tables
Chaque widget fonctionne dans un conteneur sécurisé et isolé (Shadow DOM) qui n'interfère pas avec les styles du site hôte.
Slots de widgets
Chaque activation de widget consomme un slot de widget, que ce soit sur votre propre site ou comme embed sur un domaine externe.
Limites de slots par plan :
• Starter : 5 slots
• Professional : 15 slots
• Agency : 100 slots
Besoin de plus de slots ? Passez à un plan supérieur. Aucun pack de slots séparé n'est disponible.
Conseils
- Consultez votre utilisation actuelle des slots via CMS → Widgets intégrables.
- Désactivez les widgets inutilisés pour libérer des slots.
Activer un embed
Allez dans CMS → Widgets intégrables et suivez ces étapes :
1. Cliquez sur 'Ajouter un widget'
2. Choisissez le type de widget (ex. Avis, Réservation)
3. Choisissez le type de cible : propre site ou domaine externe
4. Pour un domaine externe : entrez le domaine complet (ex. https://sitepartenaire.fr)
5. Cliquez sur 'Activer'
Le système valide le domaine (HTTPS requis, pas d'IP privées) et active le widget.
Conseils
- Vous pouvez configurer jusqu'à 20 domaines autorisés par site.
- Seuls les domaines HTTPS sont autorisés pour l'intégration.
Remarque
- Assurez-vous que le domaine correspond exactement à l'endroit où vous placez le widget. Un domaine incorrect bloquera le widget.
Générer le code d'intégration
Après l'activation, générez le code d'intégration :
1. Cliquez sur l'icône de code à côté d'un embed actif
2. Copiez le snippet de script
3. Collez-le dans le HTML du site externe
Exemple :
```html
<script src="https://widgets.your-img-cdn.com/sdk.js"
data-site="VOTRE_SITE_ID"
data-widget="reviews"
data-lang="fr"></script>
```
Le widget se charge automatiquement et s'affiche là où vous placez le script.
Conseils
- Vous pouvez définir la langue via data-lang (nl, en, de, fr, es).
- Le widget s'adapte automatiquement à la largeur de son conteneur.
Sécurité
Les Widgets intégrables sont sécurisés avec plusieurs couches :
• Validation de domaine — Seuls les domaines configurés peuvent charger le widget
• Tokens liés à l'origine — Tokens JWT à courte durée de vie liés au site, widget et domaine
• Limitation de débit — Maximum 60 requêtes par site par minute, 20 par IP par minute
• CSP frame-ancestors — Protection du navigateur bloquant l'intégration sur les domaines non autorisés
• Isolation Shadow DOM — Le code et les styles du widget sont isolés de la page hôte
Remarque
- Supprimez les domaines inutilisés de votre configuration pour prévenir les abus.
- Ne partagez pas votre code d'intégration publiquement — bien que la sécurité soit liée au domaine, il est préférable de ne fournir le code qu'à des partenaires de confiance.
Désactiver un embed
Allez dans CMS → Widgets intégrables :
1. Cliquez sur l'icône de corbeille à côté de l'embed que vous souhaitez supprimer
2. Confirmez la désactivation
Le widget cesse immédiatement de fonctionner sur le domaine externe et le slot est libéré.
Conseils
- Après la désactivation, le widget ne se chargera plus, même si le script est encore sur le site externe.
Installation par plateforme
Ci-dessous les instructions pour ajouter le script d'intégration sur chaque plateforme.
WordPress (éditeur classique ou blocs) :
1. Allez sur la page où vous voulez le widget
2. Ajoutez un bloc 'HTML personnalisé' (Gutenberg) ou basculez en mode texte
3. Collez le script d'intégration
4. Enregistrez et publiez
Elementor :
1. Ouvrez la page dans Elementor
2. Glissez le widget 'HTML' à la position souhaitée
3. Collez le script d'intégration dans le champ HTML
4. Cliquez sur 'Mettre à jour'
Oxygen Builder :
1. Ouvrez la page dans Oxygen
2. Ajoutez un composant 'Code Block'
3. Sélectionnez l'onglet 'HTML' ou 'Full Code'
4. Collez le script d'intégration
5. Enregistrez
Webflow :
1. Ajoutez un élément 'Embed' à la page
2. Collez le script d'intégration dans le champ de code
3. Publiez le site
Squarespace :
1. Ajoutez un bloc 'Code' à la page
2. Collez le script d'intégration
3. Enregistrez et publiez
Wix :
1. Cliquez sur 'Ajouter' (+) → 'Intégrer du code' → 'Personnalisé'
2. Cliquez sur 'Entrer le code'
3. Collez le script d'intégration
4. Positionnez l'élément à l'endroit souhaité
Shopify :
1. Allez dans Boutique en ligne → Thèmes → 'Modifier le code'
2. Ouvrez le fichier template de la page souhaitée (ex. `page.liquid`)
3. Collez le script d'intégration à la position souhaitée
4. Enregistrez
Site HTML statique :
Collez le script d'intégration directement dans le `<body>` de votre fichier HTML là où vous souhaitez que le widget apparaisse.
Conseils
- Le script peut être placé n'importe où dans le <body> — le widget apparaît à cette position exacte (sauf Voice Agent et Chatbot, qui flottent en bas à droite).
- Vous n'avez PAS besoin d'ajouter de CSS ou JavaScript supplémentaire. Le script charge tout automatiquement.
- Testez toujours dans un environnement de staging/prévisualisation avant de publier.
Remarque
- Ne placez PAS le script dans le <head> — il a besoin d'un élément visible et doit être dans le <body>.
- Certaines plateformes (comme Wix) cachent les pages de manière agressive. Après l'ajout du script, il peut falloir un moment avant que le widget soit visible.
Ce que chaque widget affiche & style
Par widget :
• Voice Agent — Un bouton d'appel flottant en bas à droite de la page. Au clic, un panneau d'appel s'ouvre avec des boutons microphone, sourdine et raccrocher. Le visiteur démarre une connexion vocale WebRTC avec l'Agent Téléphonique IA directement depuis le navigateur (aucun numéro de téléphone nécessaire).
• Chatbot — Un bouton de chat flottant en bas à droite. Au clic, une fenêtre de chat s'ouvre avec l'historique des messages, le support Markdown et le transfert optionnel au support par e-mail. Aucune connexion requise pour les visiteurs — fonctionne sur la base du siteId. Prend en charge la capture d'e-mail, le message d'accueil et 5 langues.
• Avis — Score moyen avec étoiles + liste d'avis individuels (nom, date, texte, étoiles).
• Menu — Catégories avec articles, prix et informations sur les allergènes. Inclut recherche et filtrage.
• Réservations de rendez-vous — Un flux étape par étape : choisir la date → choisir l'heure → remplir les coordonnées → confirmation.
• Réservations de table — Similaire aux rendez-vous mais pour les restaurants : choisir le nombre de convives + date → choisir l'heure → remplir les coordonnées → confirmation.
Style :
Chaque widget fonctionne dans un conteneur Shadow DOM. Cela signifie :
• Le CSS du site externe n'affecte PAS le widget
• Le widget n'affecte PAS le site externe
• Vous ne pouvez PAS appliquer de CSS personnalisé aux éléments internes du widget
Personnalisations limitées via les attributs data :
• `data-theme="light"` ou `data-theme="dark"` — basculer entre thème clair et sombre
• `data-lang="fr"` — définir la langue (nl, en, de, fr, es)
Le widget utilise automatiquement les couleurs de marque configurées dans les paramètres de votre site OptimoCMS.
Conseils
- Voice Agent et Chatbot flottent toujours en bas à droite, quel que soit l'endroit où vous placez le script sur la page.
- Les autres widgets (avis, menu, réservations) s'affichent en ligne à la position du script.
- Le Chatbot récupère automatiquement vos paramètres de chatbot (message d'accueil, couleur, nom) depuis le CMS.
- L'isolation Shadow DOM empêche les conflits avec votre thème ou CSS existant.