Anpassa din widgets utseende, beteende och funktionalitet genom konfigurationssystemet.
Alla widgetinställningar hanteras genom widgetkonfigurationen i din instrumentpanel. Konfigurationen inkluderar utseendeinställningar, beteendealternativ och innehållsanpassning.
Tänk på konfigurationen som din widgets DNA — den definierar allt från färger och typsnitt till konversationsflöden och initiala meddelanden. Den bästa delen? Ändringar av din konfiguration träder i kraft omedelbart utan att kräva några kodändringar på din webbplats.
🎨 Live-anpassning
Använd vår visuella konfigurationsredigerare i instrumentpanelen för att se dina ändringar i realtid. Ingen anledning att gissa hur färger kommer att se ut eller hur knappar kommer att bete sig — förhandsgranska allt innan publicering.
Visuellt utseende är avgörande för att få widgeten att kännas som en naturlig del av din webbplats. Våra utseendeinställningar ger dig fullständig kontroll över varje visuell aspekt.
Välj färger som matchar din varumärkesidentitet. Alla färgvärden bör vara i hex-format (t.ex. #FF5733).
Proffstips: Använd ett färgkontrastkontrollverktyg för att säkerställa att din text förblir läsbar mot dina valda bakgrunder. Detta är särskilt viktigt för tillgänglighetsöverensstämmelse.
Under Utseende kan du ställa in en separat Ljus och Mörk färgpalett — varje läge har sina egna förinställningar och färger. Vilken en besökaren ser väljs på inbäddningen med data-theme="light|dark|system" (system följer besökarens enhet), eller vid körning med CompaninWidget.setTheme(). Lämna den mörka paletten tom för att automatiskt härleda den från dina ljusa färger.
Storlek på din widget lämpligt för ditt användningsfall och publik. Större dimensioner ger mer konversationskontext, medan mindre dimensioner känns mindre påträngande.
Mobila överväganden: Widgeten skalas automatiskt på mobila enheter, men testa din konfiguration på olika skärmstorlekar för att säkerställa en bra upplevelse för alla användare.
Beteendeinställningar styr hur widgeten interagerar med användare och svarar på olika kontexter.
⚠️ Rekommendation
De flesta webbplatser bör börja med widgeten hopfälld (<code>start_open: false</code>) för att undvika att vara påträngande. Användare som behöver hjälp kommer naturligt att klicka på knappen. För dedikerade hjälp/supportsidor kan det vara fördelaktigt att starta öppen.
Hälsningsmeddelandet är det första användarna ser när de öppnar widgeten. Gör det välkomnande, tydligt och handlingsinriktat. Du kan inkludera interaktiva knappar för att vägleda användare till vanliga uppgifter.
Ett bra hälsningsmeddelande bör:
Exempel: "Hej där! 👋 Jag är här för att hjälpa till med frågor om våra produkter, prissättning eller konto. Hur kan jag hjälpa dig idag?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Konversationsflöden är fördefinierade vägar som vägleder användare genom vanliga scenarier. De är perfekta för FAQ, felsökning eller fler stegprocesser som returer eller bokningar.
Flöden utlöses av specifika nyckelord eller knapptryckningar. När de utlöses visar de en serie svar med valfria handlingsknappar, vilket skapar en guidad konversationsupplevelse utan att kräva AI-bearbetning.
Bästa praxis för flöden:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Konfigurera text för flera språk:
Lägg till anpassad CSS för avancerad styling:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Konfigurera externa API-slutpunkter för förbättrad funktionalitet: