Personnaliser et intégrer le widget

Personnaliser l'apparence

Dans Design studio → Thème, réglez séparément les variantes Clair et Sombre :

• couleur primaire et couleur de fond ;
• arrondi des coins ;
• police ;
• mode clair, sombre ou automatique ;
• logo et avatar du bot ;
• position du bouton d'ouverture et marges horizontale et verticale.

L'interface signale un contraste insuffisant entre les couleurs. L'enregistrement reste possible, mais corrigez ces alertes avant la publication afin que les boutons, bulles et textes restent lisibles.

Utilisez les aperçus Desktop, Mobile, Bubble, Inline et Plein écran pour contrôler chaque format.

Personnaliser les textes

Dans l'onglet Textes, choisissez la langue de l'interface du widget, puis adaptez :

• le titre de l'en-tête ;
• le message d'accueil ;
• trois à cinq questions suggérées, réordonnables ;
• le texte du champ de saisie ;
• la mention indiquant que le visiteur échange avec une IA ;
• les messages de quota et d'erreur.

Le choix de langue traduit les boutons et mentions de l'interface. Il ne traduit pas automatiquement les textes personnalisés que vous saisissez.

Gérer la clé publique

Dans Sécurité → Clés publiques, générez la clé utilisée par le code d'intégration. Copiez-la lorsqu'elle est affichée : sa valeur complète n'est montrée qu'une fois.

Une clé publique est visible dans le HTML du site, ce qui est prévu. Elle identifie le chatbot mais ne remplace pas la liste des domaines autorisés.

Lors d'une rotation, l'ancienne clé reste valable pendant 7 jours afin de mettre à jour les sites. Deux clés actives au maximum sont conservées. Une révocation, elle, est immédiate et irréversible : tous les widgets utilisant cette clé cessent de fonctionner.

Copier le code d'intégration

Dans Intégration, choisissez :

• Bubble (script) pour afficher un bouton flottant ;
• Inline (iframe) pour intégrer le chat dans le contenu d'une page ;
• le lien direct plein écran et son QR code pour un e-mail, une affiche ou un événement.

Pour la bulle, choisissez sa position et copiez la balise juste avant </body>. Pour l'iframe, réglez largeur et hauteur puis insérez le code à l'endroit voulu.

Si le code affiche un emplacement réservé pour la clé, collez la clé complète dans Votre clé publiable afin de composer un extrait prêt à copier. Cette valeur reste dans la page et n'est pas enregistrée.

Vérifiez ensuite que le domaine exact du site est autorisé, puis ouvrez la démo. Testez aussi la vraie page dans une fenêtre privée pour reproduire le parcours d'un visiteur non connecté.