Tilpass widgetens utseende, atferd og funksjonalitet gjennom konfigurasjonssystemet.
Alle widgetinnstillinger administreres gjennom widgetkonfigurasjonen i dashbordet ditt. Konfigurasjonen inkluderer utseendeinnstillinger, atferdsalternativer og innholdstilpasning.
Tenk på konfigurasjonen som widgetens DNA — den definerer alt fra farger og skrifttyper til samtaleflows og innledende meldinger. Den beste delen? Endringer i konfigurasjonen din trer i kraft umiddelbart uten å kreve noen kodeendringer på nettstedet ditt.
🎨 Live tilpasning
Bruk vår visuelle konfigurasjonsredigerer i dashbordet for å se endringene dine i sanntid. Ingen grunn til å gjette hvordan fargene vil se ut eller hvordan knappene vil oppføre seg — forhåndsvis alt før publisering.
Visuelt utseende er avgjørende for å få widgeten til å føles som en naturlig del av nettstedet ditt. Våre utseendeinnstillinger gir deg full kontroll over hvert visuelle aspekt.
Velg farger som matcher merkeidentiteten din. Alle fargeverdier bør være i hex-format (f.eks. #FF5733).
Pro tips: Bruk et fargekontrastkontrollverktøy for å sikre at teksten din forblir lesbar mot de valgte bakgrunnene. Dette er spesielt viktig for tilgjengelighetsoverholdelse.
Under Utseende kan du sette en egen lys og mørk fargepalett — hver modus har sine egne forhåndsinnstillinger og farger. Hvilken en besøkende ser velges på integreringen med data-theme="light|dark|system" (system følger besøkendes enhet), eller ved kjøring med CompaninWidget.setTheme(). La den mørke paletten være tom for å auto-avlede den fra lysfargene dine.
Størrelse widgeten din passende for bruken og publikum. Større dimensjoner gir mer samtalekontekst, mens mindre dimensjoner føles mindre påtrengende.
Mobilvurdering: Widgeten skalerer automatisk på mobile enheter, men test konfigurasjonen din på forskjellige skjermstørrelser for å sikre en god opplevelse for alle brukere.
Atferdsinnstillinger kontrollerer hvordan widgeten interagerer med brukere og svarer på forskjellige kontekster.
⚠️ Anbefaling
De fleste nettsteder bør starte med widgeten sammenfoldet (<code>start_open: false</code>) for å unngå å være påtrengende. Brukere som trenger hjelp, vil naturlig klikke på knappen. For dedikerte hjelpe-/støttesider kan det være gunstig å starte åpen.
Hilsningsmeldingen er det første brukerne ser når de åpner widgeten. Gjør den innbydende, klar og handlingsorientert. Du kan inkludere interaktive knapper for å veilede brukerne til vanlige oppgaver.
En god hilsningsmelding bør:
Eksempel: "Hei der! 👋 Jeg er her for å hjelpe med spørsmål om produktene våre, priser eller konto. Hvordan kan jeg hjelpe deg i dag?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Samtaleflows er forhåndsdefinerte stier som veileder brukerne gjennom vanlige scenarier. De er perfekte for FAQ, feilsøking eller flertrinnsprosesser som returer eller bestillinger.
Flows utløses av spesifikke nøkkelord eller knappetrykk. Når de utløses, viser de en serie svar med valgfrie handlingsknapper, og skaper en guidet samtaleopplevelse uten å kreve AI-behandling.
Beste praksis for flows:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Konfigurer tekst for flere språk:
Legg til egendefinert CSS for avansert styling:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Konfigurer eksterne API-endepunkter for forbedret funksjonalitet: