Personnalisez l'apparence, le comportement et la fonctionnalité de votre widget via le système de configuration.
Tous les paramètres du widget sont gérés via la configuration du widget dans votre tableau de bord. La configuration comprend des paramètres d'apparence, des options comportementales et une personnalisation de contenu.
Pensez à la configuration comme à l'ADN de votre widget — elle définit tout, des couleurs et des polices aux flux de conversation et aux messages initiaux. Le meilleur ? Les changements apportés à votre configuration prennent effet immédiatement sans nécessiter de modifications de code sur votre site Web.
🎨 Personnalisation en direct
Utilisez notre éditeur de configuration visuelle dans le tableau de bord pour voir vos changements en temps réel. Pas besoin de deviner comment les couleurs auront l'air ou comment les boutons se comporteront — prévisualisez tout avant de publier.
L'apparence visuelle est cruciale pour faire en sorte que le widget se sente comme une partie naturelle de votre site Web. Nos paramètres d'apparence vous donnent un contrôle total sur chaque aspect visuel.
Choisissez des couleurs qui correspondent à l'identité de votre marque. Toutes les valeurs de couleur doivent être au format hexadécimal (par exemple, #FF5733).
Astuce pro : Utilisez un outil de vérification de contraste des couleurs pour vous assurer que votre texte reste lisible par rapport à vos arrière-plans choisis. Cela est particulièrement important pour la conformité à l'accessibilité.
Sous Apparence, vous pouvez définir une palette de couleurs séparée claire et foncée — chaque mode a ses propres préréglages et couleurs. Le mode qu'un visiteur voit est choisi lors de l'intégration avec data-theme="light|dark|system" (le système suit l'appareil du visiteur), ou à l'exécution avec CompaninWidget.setTheme(). Laissez la palette foncée vide pour la dériver automatiquement de vos couleurs claires.
Dimensionnez votre widget de manière appropriée pour votre cas d'utilisation et votre public. Des dimensions plus grandes fournissent plus de contexte de conversation, tandis que des dimensions plus petites se sentent moins intrusives.
Considération mobile : Le widget s'adapte automatiquement sur les appareils mobiles, mais testez votre configuration sur différentes tailles d'écran pour garantir une bonne expérience pour tous les utilisateurs.
Les paramètres comportementaux contrôlent comment le widget interagit avec les utilisateurs et répond à différents contextes.
⚠️ Recommandation
La plupart des sites devraient commencer avec le widget réduit (<code>start_open: false</code>) pour éviter d'être intrusifs. Les utilisateurs qui ont besoin d'aide cliqueront naturellement sur le bouton. Pour les pages d'aide/support dédiées, commencer ouvert peut être bénéfique.
Le message de bienvenue est la première chose que les utilisateurs voient lorsqu'ils ouvrent le widget. Rendez-le accueillant, clair et actionnable. Vous pouvez inclure des boutons interactifs pour guider les utilisateurs vers des tâches courantes.
Un bon message de bienvenue devrait :
Exemple : "Salut ! 👋 Je suis ici pour aider avec des questions sur nos produits, prix ou compte. Comment puis-je vous aider aujourd'hui ?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Les flux de conversation sont des chemins prédéfinis qui guident les utilisateurs à travers des scénarios courants. Ils sont parfaits pour les FAQ, le dépannage ou les processus en plusieurs étapes comme les retours ou les réservations.
Les flux sont déclenchés par des mots-clés spécifiques ou des clics sur des boutons. Lorsqu'ils sont déclenchés, ils affichent une série de réponses avec des boutons d'action optionnels, créant une expérience de conversation guidée sans nécessiter de traitement AI.
Meilleures pratiques pour les flux :
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Configurez le texte pour plusieurs langues :
Ajoutez du CSS personnalisé pour un style avancé :
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Configurez des points de terminaison API externes pour une fonctionnalité améliorée :