Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Cookiemeddelelse
Anvender din selvbetjeningsløsning cookies til andet end teknisk nødvendige formål, skal brugeren vises en cookiemeddelelse.
Sådan bruges komponenten
Anvendes til
Brug cookiemeddelelsen til at få brugerens accept af de cookies du sætter i din løsning ud over de funktionelt nødvendige.
Anvendes ikke til
Du behøver ikke vise en cookiemeddelelse, hvis din løsning kun sætter funktionelt nødvendige cookies.
Vejledning
Du skal selv tilpasse indholdet i meddelelsen, så den overholder gældende lovgivning og stemmer overens med din løsnings specifikke anvendelse af cookies.
De to handlingsknapper skal begge have sekundær visuel vægt, så ingen af valgmulighederne fremhæves frem for den anden.
Brug enten et link eller detaljekomponenten til at give brugeren adgang til yderligere information om anvendelsen af cookies. Hvis adgang via et link forudsætter accept af cookies, anbefales det at anvende detaljekomponenten.
Logo
Det anbefales, at afsenderens logo vises i cookiemeddelelsen, så det er tydeligt for brugeren, hvem der står bag løsningen. Du vurderer selv logoets størrelse, så det passer naturligt ind i cookiemodulet og samtidig er tydeligt for brugeren. Som udgangspunkt bør logoet ikke være mere end 120 px bredt eller 60 px højt.
Hvis det ikke er muligt at indsætte et logo, kan afsenderens navn i stedet vises som tekst. Teksten placeres samme sted som logoet og styles således:
- Fontstørrelse: 16 px
- Farve: #1A1A1A
- Fontvægt: Semibold (600)
Varianter
Når der er to cookieindstillinger
Ved kun to cookieindstillinger anbefales en løsning uden tjekbokse. Cookiemodalet bør tydeligt beskrive, hvilke cookies brugeren skal forholde sig til. Brugeren skal kun tage stilling til, om vedkommende vil acceptere cookies eller afvise cookies, ud over de funktionelt nødvendige cookies.
Når der er flere end to cookies (udvidet løsning)
Hvis din løsning anvender mere end 2 cookies, bør du bruge tjekbokse, så brugeren selv kan vælge, hvilke cookies der accepteres.
Brug detaljekomponenten til at beskrive de enkelte cookies og gerne med punktopstilling. Ved at bruge punktopstilling med korte forklaringer bliver information mere overskueligt og nemmere at gennemlæse. https://www.nngroup.com/articles/cookie-permissions/
Brugeren kan enten vælge “Accepter valgte cookies”, hvilket betyder, at kun de markerede cookies accepteres, eller vælge at acceptere alle cookies.
Sådan (do)
Sådan: Vis cookiemeddelelse, hvor den er synlig uden at ødelægge brugernes mulighed for at danne sig et første indtryk af webstedet.
Ikke sådan (don't)
Ikke sådan: Vis ikke cookiemeddelelse i et modalvindue. Det gør det umuligt for brugerne at se siden, før de har accepteret cookies (Friedman, 2019). Det distraherer brugerne fra det, de kom for, og kan sågar få dem til at glemme, hvad de var i gang med (Fessenden, 2017).
Sådan (do)
Sådan: Hvis det er vigtigt for websitet, at brugerne tager stilling til cookiemeddelelsen, er det nødvendigt at gøre det tydeligt, at de skal træffe et valg. Det kan gøres ved at vise meddelelsen på en prominent plads på siden, og at lade den følge med, når der scrolles. Overvej at tilbyde brugerne flere valgfrie cookie-indstillinger, så de fx kan sige ja eller nej til cookies til brug for statistik, personalisering og komfort.
Ikke sådan (don't)
Ikke sådan: Undgå at give cookiemeddelelsen en diskret placering i sidens periferi, hvis det er vigtigt, at de tager stilling til den. Brugernes blik er primært fokuseret midt på websider.
Referencer
Installation
HTML Struktur
Koden indsættes under body og før header. Gør man brug af Gå til sidens indhold, skal denne indsættes efter cookiemeddelelsen.
Bemærk at DKFDS på nuværende tidspunkt kun leverer HTML og CSS til denne komponent. Funktionaliteten skal man derfor selv håndtere.
Cookies brugt til statistik må ikke sættes, før man aktivt har accepteret dette.
Om custom elements
Eksempler
Hvis cookiemeddelelsen indeholder et logo, er det op til løsningen selv at sætte en passende højde og bredde for dette. Giv logoet en passende alt-tekst, så det også er muligt for skærmlæserbrugere at vide, hvem der står bag selvbetjeningsløsningen.
<fds-modal-opener modal-id="simple-cookie-example">
<button class="button button-secondary" type="button">Vis standard cookiemeddelelse</button>
</fds-modal-opener>
<fds-modal id="simple-cookie-example" heading="Denne selvbetjening bruger cookies" heading-id="simple-cookie-example-heading" dismissible="false">
<dialog>
<form method="dialog">
<div class="scrollable-area has-fade pb-0">
<img class="cookie-logo" id="simple-cookie-example-logo" src="/assets/img/logo-header-placeholder.png" alt="Logo for myndighed, der står bag selvbetjeningsløsningen" style="max-width: 110px;">
<div class="modal-top"></div>
<p>Vi indsamler statistik ved hjælp af cookies. Alle indsamlede data anonymiseres. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit nunc nec arcu lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
<p class="mb-0"><a href="#">Læs mere om vores brug af cookies</a></p>
</div>
<div class="fixed-area">
<div class="button-group">
<button class="button button-secondary" type="submit" value="accept">Accepter cookies</button>
<button class="button button-secondary" type="submit" value="reject">Nej til cookies</button>
</div>
</div>
</form>
</dialog>
</fds-modal>
<fds-modal-opener modal-id="simple-cookie-example">
<button class="button button-secondary" type="button" aria-haspopup="dialog">Vis standard cookiemeddelelse</button>
</fds-modal-opener>
<fds-modal id="simple-cookie-example" heading="Denne selvbetjening bruger cookies" heading-id="simple-cookie-example-heading" dismissible="false">
<dialog aria-labelledby="simple-cookie-example-heading" closedby="none">
<form method="dialog">
<div class="scrollable-area has-fade pb-0">
<img class="cookie-logo" id="simple-cookie-example-logo" src="/assets/img/logo-header-placeholder.png" alt="Logo for myndighed, der står bag selvbetjeningsløsningen" style="max-width: 110px;">
<div class="modal-top">
<h2 class="top-heading" tabindex="-1" id="simple-cookie-example-heading">Denne selvbetjening bruger cookies</h2>
</div>
<p>Vi indsamler statistik ved hjælp af cookies. Alle indsamlede data anonymiseres. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit nunc nec arcu lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
<p class="mb-0">
<a href="#">Læs mere om vores brug af cookies</a>
</p>
</div>
<div class="fixed-area">
<div class="button-group">
<button class="button button-secondary" type="submit" value="accept">Accepter cookies</button>
<button class="button button-secondary" type="submit" value="reject">Nej til cookies</button>
</div>
</div>
</form>
</dialog>
</fds-modal>Varianter
Flere end to typer cookies
<fds-modal-opener modal-id="choices-cookie-example">
<button class="button button-secondary" type="button">Vis cookiemeddelelse med tjekbokse</button>
</fds-modal-opener>
<fds-modal id="choices-cookie-example" heading="Denne selvbetjening bruger cookies" heading-id="choices-cookie-example-heading" dismissible="false">
<dialog>
<form method="dialog">
<div class="scrollable-area has-fade pb-0">
<img class="cookie-logo" id="choices-cookie-example-logo" src="/assets/img/logo-header-placeholder.png"
alt="Logo for myndighed, der står bag selvbetjeningsløsningen" style="max-width: 110px;">
<div class="modal-top"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit nunc nec
arcu lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
<div class="d-block d-sm-flex flex-wrap mb-6">
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="required" id="chke5e8005a" disabled checked>
<label>Nødvendige (kan ikke fravælges)</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="statistics" id="chk4cc20cb0">
<label>Statistik</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="preferences" id="chk9c4c0116">
<label>Præferencer</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="functional" id="chkb0395b9c">
<label>Funktionelle</label>
</fds-checkbox>
</div>
<details class="details mb-md-4">
<summary class="details-summary">Læs mere om vores brug af cookies</summary>
<div class="details-text">
<h3 class="h5 mt-0">Nødvendige</h3>
<p>Pellentesque nulla mi, pulvinar id blandit eu, volutpat at libero.</p>
<ul>
<li>Donec vulputate eros non felis finibus</li>
<li>Ut facilisis leo dapibus</li>
</ul>
<h3 class="h5">Statistik</h3>
<p>Morbi faucibus nunc tortor, condimentum vulputate urna sollicitudin non. Nam commodo nulla metus. Phasellus varius eu dolor
nec ultricies.</p>
<ul>
<li>Aenean vulputate</li>
<li>Magna quis tempor consequat</li>
<li>Mi ligula bibendum arcu</li>
</ul>
<h3 class="h5">Præferencer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac leo finibus, blandit velit nec, consequat est. Nulla
facilisi.</p>
<ul>
<li>A pulvinar libero elit at nibh</li>
<li>Sed non ornare eros</li>
<li>Quis egestas magna</li>
</ul>
<h3 class="h5">Funktionelle</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
<li>Nullam a quam tincidunt</li>
<li>Laoreet vitae efficitur volutpat</li>
</ul>
</div>
</details>
</div>
<div class="fixed-area">
<div class="button-group">
<button class="button button-secondary" type="submit" value="accept">Accepter udvalgte cookies</button>
<button class="button button-secondary" type="submit" value="reject">Accepter alle cookies</button>
</div>
</div>
</form>
</dialog>
</fds-modal><fds-modal-opener modal-id="choices-cookie-example">
<button class="button button-secondary" type="button" aria-haspopup="dialog">Vis cookiemeddelelse med tjekbokse</button>
</fds-modal-opener>
<fds-modal id="choices-cookie-example" heading="Denne selvbetjening bruger cookies" heading-id="choices-cookie-example-heading" dismissible="false">
<dialog aria-labelledby="choices-cookie-example-heading" closedby="none">
<form method="dialog">
<div class="scrollable-area has-fade pb-0">
<img class="cookie-logo" id="choices-cookie-example-logo" src="/assets/img/logo-header-placeholder.png" alt="Logo for myndighed, der står bag selvbetjeningsløsningen" style="max-width: 110px;">
<div class="modal-top">
<h2 class="top-heading" tabindex="-1" id="choices-cookie-example-heading">Denne selvbetjening bruger cookies</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit nunc nec arcu lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
<div class="d-block d-sm-flex flex-wrap mb-6">
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="required" id="chke5e8005a" disabled="" checked="" class="form-checkbox">
<label class="form-label disabled" for="chke5e8005a">Nødvendige (kan ikke fravælges)</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="statistics" id="chk4cc20cb0" class="form-checkbox">
<label class="form-label" for="chk4cc20cb0">Statistik</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="preferences" id="chk9c4c0116" class="form-checkbox">
<label class="form-label" for="chk9c4c0116">Præferencer</label>
</fds-checkbox>
<fds-checkbox class="mr-sm-5">
<input type="checkbox" name="functional" id="chkb0395b9c" class="form-checkbox">
<label class="form-label" for="chkb0395b9c">Funktionelle</label>
</fds-checkbox>
</div>
<details class="details mb-md-4">
<summary class="details-summary">Læs mere om vores brug af cookies</summary>
<div class="details-text">
<h3 class="h5 mt-0">Nødvendige</h3>
<p>Pellentesque nulla mi, pulvinar id blandit eu, volutpat at libero.</p>
<ul>
<li>Donec vulputate eros non felis finibus</li>
<li>Ut facilisis leo dapibus</li>
</ul>
<h3 class="h5">Statistik</h3>
<p>Morbi faucibus nunc tortor, condimentum vulputate urna sollicitudin non. Nam commodo nulla metus. Phasellus varius eu dolor nec ultricies.</p>
<ul>
<li>Aenean vulputate</li>
<li>Magna quis tempor consequat</li>
<li>Mi ligula bibendum arcu</li>
</ul>
<h3 class="h5">Præferencer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac leo finibus, blandit velit nec, consequat est. Nulla facilisi.</p>
<ul>
<li>A pulvinar libero elit at nibh</li>
<li>Sed non ornare eros</li>
<li>Quis egestas magna</li>
</ul>
<h3 class="h5">Funktionelle</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
<li>Nullam a quam tincidunt</li>
<li>Laoreet vitae efficitur volutpat</li>
</ul>
</div>
</details>
</div>
<div class="fixed-area">
<div class="button-group">
<button class="button button-secondary" type="submit" value="accept">Accepter udvalgte cookies</button>
<button class="button button-secondary" type="submit" value="reject">Accepter alle cookies</button>
</div>
</div>
</form>
</dialog>
</fds-modal>