Pas het uiterlijk, gedrag en functionaliteit van uw widget aan via het configuratiesysteem.
Alle widgetinstellingen worden beheerd via de widgetconfiguratie in uw dashboard. De configuratie omvat uiterlijkinstellingen, gedragsopties en inhoudsanpassing.
Beschouw de configuratie als het DNA van uw widget — het definieert alles van kleuren en lettertypen tot gesprekstromen en initiële berichten. Het beste deel? Wijzigingen in uw configuratie worden onmiddellijk van kracht zonder dat er codewijzigingen op uw website nodig zijn.
🎨 Live aanpassing
Gebruik onze visuele configuratie-editor in het dashboard om uw wijzigingen in realtime te zien. Geen nood om te raden hoe kleuren eruit zullen zien of hoe knoppen zich zullen gedragen — bekijk alles voordat u publiceert.
Visueel uiterlijk is cruciaal om de widget als een natuurlijk onderdeel van uw website te laten aanvoelen. Onze uiterlijkinstellingen geven u volledige controle over elk visueel aspect.
Kies kleuren die overeenkomen met uw merkidentiteit. Alle kleurwaarden moeten in hex-formaat zijn (bijv. #FF5733).
Pro-tip: Gebruik een kleurcontrastchecker om ervoor te zorgen dat uw tekst leesbaar blijft tegen uw gekozen achtergronden. Dit is vooral belangrijk voor toegankelijkheidscompliance.
Onder Uiterlijk kunt u een aparte lichte en donkere kleurenpalet instellen — elke modus heeft zijn eigen presets en kleuren. Welke een bezoeker ziet, wordt gekozen op de insluiting met data-theme="light|dark|system" (systeem volgt het apparaat van de bezoeker), of tijdens runtime met CompaninWidget.setTheme(). Laat het donkere palet leeg om het automatisch af te leiden van uw lichte kleuren.
Size uw widget passend voor uw gebruiksdoel en publiek. Grotere afmetingen bieden meer gesprekscontext, terwijl kleinere afmetingen minder opdringerig aanvoelen.
Mobiele overweging: De widget schaalt automatisch op mobiele apparaten, maar test uw configuratie op verschillende schermformaten om een goede ervaring voor alle gebruikers te garanderen.
Gedragsinstellingen regelen hoe de widget met gebruikers omgaat en reageert op verschillende contexten.
⚠️ Aanbeveling
De meeste sites zouden moeten beginnen met de widget ingeklapt (<code>start_open: false</code>) om opdringerigheid te vermijden. Gebruikers die hulp nodig hebben, zullen van nature op de knop klikken. Voor speciale hulp-/ondersteuningspagina's kan het voordelig zijn om open te beginnen.
Het begroetingsbericht is het eerste dat gebruikers zien wanneer ze de widget openen. Maak het welkom, duidelijk en actiegericht. U kunt interactieve knoppen opnemen om gebruikers naar veelvoorkomende taken te leiden.
Een goed begroetingsbericht moet:
Voorbeeld: "Hallo daar! 👋 Ik ben hier om te helpen met vragen over onze producten, prijzen of account. Hoe kan ik u vandaag helpen?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Gesprekstromen zijn vooraf gedefinieerde paden die gebruikers door veelvoorkomende scenario's leiden. Ze zijn perfect voor FAQ's, probleemoplossing of meerstapsprocessen zoals retouren of boekingen.
Stromen worden geactiveerd door specifieke trefwoorden of knopklikken. Wanneer geactiveerd, tonen ze een reeks reacties met optionele actieknoppen, waardoor een begeleide gesprekservaring ontstaat zonder dat AI-verwerking nodig is.
Beste praktijken voor stromen:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Configureer tekst voor meerdere talen:
Voeg aangepaste CSS toe voor geavanceerde styling:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Configureer externe API-eindpunten voor verbeterde functionaliteit: