Constructeur de widgets

Le constructeur de widgets génère des composants HTML autonomes — formulaires de contact, formulaires d'avis, tableaux de prix — qui apparaissent directement dans la fenêtre de chat lorsque l'IA les déclenche ou que le visiteur les ouvre depuis le menu du widget.

Un widget du constructeur collecte des données (enregistrées dans l'onglet Soumissions). Il n'appelle pas les transporteurs ni les catalogues produits — c'est le rôle des Intégrations, qui renvoient des résultats sous forme de texte dans le chat ou de carrousel de produits.

Ouvrir le constructeur

Allez dans l'onglet Capacités et passez au sous-onglet AI-Constructeur (également accessible via le lien rapide AI-Constructeur dans la barre latérale). Cliquez sur Nouveau widget.

Modèles rapides

Deux modèles de départ sont disponibles en haut :

Cliquez sur un modèle pour le générer immédiatement, ou ignorez-les et décrivez le vôtre ci-dessous.

Prompt personnalisé

Saisissez une description du widget souhaité dans le champ. Soyez aussi précis que vous le souhaitez :

Un formulaire d'avis avec une note de 1 à 5 étoiles, un champ de commentaire et
un bouton « Envoyer l'avis ». Style sur fond sombre avec des accents orange.

L'IA génère le widget et affiche un aperçu en direct dans une maquette de chat, pour que vous voyiez exactement ce que verra un visiteur.

Itérer et affiner

Après la génération, le champ « Demandez une modification… » apparaît sous l'aperçu. Décrivez ce que vous voulez changer :

Arrondis les boutons et augmente la taille de police des prix.

Ajoute une note sous le tableau de prix : « Tous les prix HT ».

Chaque itération est une nouvelle génération par l'IA et met à jour l'aperçu.

Enregistrer le widget

Quand tout convient, saisissez :

• Nom du widget — libellé interne (p. ex. « Tableau de prix – principal »).
• Condition de déclenchement — la condition en langage naturel indiquant quand l'IA affiche ce widget.
• Afficher dans le menu du widget — optionnellement, listez-le aussi dans le menu de lancement ＋, pour que les visiteurs puissent l'ouvrir à la demande (indépendamment du déclenchement par l'IA).

Affiche le tableau de prix quand le visiteur demande les forfaits, les tarifs ou ce qui est inclus.

Un widget peut être déclenché par l'IA, dans le menu, les deux ou aucun — mais pour s'afficher il doit être activé. Cliquez sur Enregistrer ; le widget apparaît dans l'aperçu des Capacités sous forme de carte avec une miniature.

Gérer les widgets

Depuis l'aperçu des Capacités, vous pouvez :

• Activer/désactiver un widget.
• Modifier — rouvre le constructeur avec le HTML existant pour l'affiner.
• Supprimer — supprime définitivement le widget.

Comment les widgets apparaissent dans le chat

Lorsque l'IA détecte une correspondance avec la condition (ou que le visiteur ouvre le widget depuis le menu ＋), il est rendu comme un message du bot. Le widget s'exécute dans un <iframe> isolé, il ne peut donc pas affecter votre page, et il ajuste sa taille à son contenu.

Si le widget contient un formulaire, le visiteur le soumet depuis le chat. Après l'envoi, le formulaire est remplacé par une confirmation neutre « Envoyé », et les données sont enregistrées dans votre onglet Soumissions.

Conseils

• Gardez les widgets centrés sur une seule action — un tableau de prix qui comporte aussi un formulaire de contact et un carrousel de produits est déroutant.
• Rendez les conditions de déclenchement précises pour éviter que le widget n'apparaisse dans des conversations sans rapport.
• Les widgets générés utilisent uniquement du CSS en ligne et du JavaScript pur — aucune bibliothèque externe ni requête réseau.
• L'endpoint de rendu force la pleine largeur du widget, il s'adapte donc à la taille définie. Si une mise en page semble encore décalée, demandez : « Mets le conteneur en width:100% pour qu'il remplisse l'espace. »