Personnalisez l'apparence, le comportement et la fonctionnalité de votre widget grâce au 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 du 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 modifications apportées à 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 modifications en temps réel. Pas besoin de deviner comment les couleurs vont apparaître ou comment les boutons vont se comporter—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 du 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é.
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 : "Bonjour ! 👋 Je suis ici pour aider avec des questions sur nos produits, nos prix ou votre 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 de bouton. 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é :
/* Styles de widget personnalisés */.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 :