CSS-styling av undersøkelse

Skyra kan styles direkte fra nettstedet ved hjelp av CSS-variabler. For mer detaljert kontroll finnes også støtte for CSS Parts.

For de fleste anbefaler vi å starte med Design i Skyra. Der kan du administrere farger, typografi, kantlinjer, avrunding og andre visuelle innstillinger uten å skrive CSS.

CSS er nyttig når du:

• trenger en innstilling som ikke finnes i Design
• ønsker å styre designet fra nettstedets egen CSS
• vil overstyre enkelte egenskaper på bestemte sider eller undersøkelser
• trenger mer detaljert styling med CSS Parts
• ønsker å endre z-index for å legge over/under chatbot.

Hva er forskjellen på Design og CSS?

Det er noe overlapp mellom de to metodene.

Vanlige innstillinger som bakgrunnsfarge, tekstfarge, knappfarger og typografi kan styres både gjennom Design og med CSS-variabler.

Andre innstillinger finnes bare ett av stedene.

• Design gir blant annet visuell kontroll over flere innstillinger for kantlinjer, avrunding, fokusringer og skygger.
• CSS gir på sin side tilgang til enkelte tekniske innstillinger, som z-index og maksimal høyde, som ikke kan settes i Design.

Du trenger derfor normalt ikke CSS for å lage et eget visuelt uttrykk. Bruk CSS når du har et konkret behov som løses bedre fra nettstedet eller ikke er tilgjengelig i Design.

Hvordan bruke CSS-variabler

CSS-variablene settes på skyra-survey på nettstedet der Skyra er installert.

Du kan bruke variablene til å overstyre standardverdiene i widgeten. Du kan også målrette CSS mot én bestemt undersøkelse dersom den skal ha egne innstillinger.

CSS-variabler

Farger

Typografi

Layout

Variabler kun for popup-undersøkelser

Disse variablene fungerer kun for popup-undersøkelser, ikke inline-undersøkelser:

💡 Tips: --skyra-z-index er nyttig hvis du har en chatbot eller annet innhold som skal vises over eller under undersøkelsen.

Avansert: CSS Parts

For mer detaljert kontroll kan du bruke ::part()-selektoren. Dette lar deg style spesifikke elementer inne i widgeten.

Tilgjengelige parts

💡 Viktig begrensning: ::part() kan kun style selve elementet – ikke dets barn. Selektorer som ::part(wrapper) button vil ikke fungere.

Eksempler

Endre hovedfarger

Tilpass fargene til din merkevare:

<style>
skyra-survey {
  --skyra-bg-color: #ffffff;
  --skyra-text-color: #1a1a1a;
  --skyra-action-color: #2563eb;
  --skyra-action-text-color: #ffffff;
  --skyra-secondary-color: #e5e7eb;
}
</style>

Mørkt tema

Slik lager du et mørkt tema for undersøkelsen:

<style>
@media (prefers-color-scheme: dark) {
skyra-survey {
  --skyra-bg-color: #1f2937;
  --skyra-text-color: #f9fafb;
  --skyra-interface-color: #9ca3af;
  --skyra-action-color: #3b82f6;
  --skyra-action-text-color: #ffffff;
  --skyra-secondary-color: #374151;
  --skyra-link-color: #60a5fa;
  --skyra-error-color: #ef4444;
}  
}
</style>

Endre skrifttyper

Bruk dine egne fonter:

<style>
skyra-survey {
  --skyra-font-body: "Open Sans", sans-serif;
  --skyra-font-heading: "Montserrat", sans-serif;
  --skyra-font-size: 18px;
}
</style>

Style kun én undersøkelse

Du kan bruke slug-attributten for å style en spesifikk undersøkelse. Du finner din slug under survey settings.

<style>
skyra-survey[slug="min-side/tilbakemelding"] {
  --skyra-action-color: #059669;
}
</style>