Ved hjelp av CSS-variabler kan du tilpasse farger, skrifttyper og andre stiler til din merkevare.

Designe i Figma først?

Vi har laget en Figma-fil som illustrerer komponenter og varianter av undersøkelsen. Duplisér gjerne den hvis du vil designe og teste utseendet visuelt først.

💡 Figma-filen oppdateres ikke kontinuerlig, så enkelte detaljer kan avvike.

Åpne Figma-filen

CSS-variabler

Farger

Variabel	Standardverdi	Beskrivelse
`--skyra-bg-color`	`#f5f7fa`	Bakgrunnsfarge for widgeten
`--skyra-text-color`	`#012a53`	Hovedtekstfarge
`--skyra-interface-color`	`#315386`	Farge på rammer og ikoner
`--skyra-action-color`	`#002052`	Bakgrunnsfarge på primærknapper
`--skyra-action-text-color`	`var(--skyra-bg-color)`	Tekstfarge på primærknapper
`--skyra-secondary-color`	`#dde7f7`	Farge på sekundære elementer
`--skyra-link-color`	`blue`	Farge på lenker
`--skyra-error-color`	`#ca0a15`	Farge på feilmeldinger
`--skyra-warning-color`	`#92400e`	Farge på advarsler

Typografi

Variabel	Standardverdi	Beskrivelse
`--skyra-font-size`	`16px`	Basis tekststørrelse
`--skyra-font-body`	System sans-serif	Font for brødtekst
`--skyra-font-heading`	System sans-serif	Font for overskrifter

Layout

Variabel	Standardverdi	Beskrivelse
`--skyra-body-max-height`	`none`	Maks høyde for innholdsområdet

Variabler kun for popup-undersøkelser

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

Variabel	Standardverdi	Beskrivelse
`--skyra-z-index`	`2147483647`	Stabling (hvor høyt på siden undersøkelsen vises)
`--skyra-shadow`	`0 0 20px 4px rgb(from var(--skyra-action-color) r g b / 0.25)`	Box-shadow rundt widgeten
`--skyra-option-list-max-height`	`400px`	Maks høyde for listen med svaralternativer
`--skyra-minimized-bg`	`#002052`	Bakgrunnsfarge i minimert tilstand
`--skyra-minimized-text`	`rgba(255, 255, 255, 1)`	Tekstfarge i minimert tilstand
`--skyra-minimized-border`	`#106eff`	Rammefarge i minimert tilstand
`--skyra-minimized-shadow`	`0px 0px 20px 4px rgba(1, 61, 150, 0.4)`	Shadow i minimert tilstand

💡 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

⚠️ Eksperimentelt: Denne funksjonen er for avanserte brukere. Parts kan endres i fremtidige oppdateringer av widgeten.

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

Tilgjengelige parts

Part	Element	Bruksområde
`wrapper`	`<aside>`	Hovedcontainer for widgeten
`heading`	`<h2>`	Korttittel
`description`	`<p>`	Beskrivelsestekst
`bodyHtml`	`<div>`	Rikt HTML-innhold
`options`	`<div>`	Container for svaralternativer
`button-primary`	`<button>`	Primærknapper (f.eks. "Neste")
`button-secondary`	`<button>`	Sekundærknapper
`button-link`	`<button>`	Lenke-knapper
`button-chip`	`<button>`	Alternativ-chips
`list-item`	`<label>`	Likert-skala og toggle-elementer

💡 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>

Relaterte artikler

Release note September, 2024

Discovery Survey: Opprett ny undersøkelse

Hvordan kan vi få undersøkelsen til å legge seg bak chatbot?

CSS-styling av undersøkelse