Consent UI

@simmalugnt-se/consent-ui ger webbplatser samma gränssnitt och grundinställningar för c15t i offline-läge. Paketet innehåller banner, inställningsdialog, svenska och engelska standardtexter samt gemensam CSS.

Paketet hittar inte cookies eller externa tjänster. Webbplatsen måste ange vilka kategorier och skript den använder. Projektet consent-audit kontrollerar den publicerade webbplatsens beteende.

Installera paketet

Installera fasta versioner av Consent UI och c15t:

npm install --save-exact @simmalugnt-se/[email protected] @c15t/[email protected]

Importera stilen en gång i webbplatsens globala CSS eller rotlayout:

@import "@simmalugnt-se/consent-ui/styles.css";

Skapa webbplatsens konfiguration

Lägg webbplatsens namn, kategorier, texter och skript i en egen konfigurationsfil. En webbplats som bara använder nödvändig lagring behöver följande konfiguration:

import type { SiteConsentConfig } from "@simmalugnt-se/consent-ui";

export const consentConfig = {
	siteName: "Min webbplats",
	categories: ["necessary"],
} satisfies SiteConsentConfig;

necessary måste alltid finnas. Lägg bara till functionality, experience, measurement eller marketing när webbplatsen använder tjänster i den kategorin.

Lägg till en lokal provider

Den lokala providern kopplar webbplatsens konfiguration och språk till paketet. Den ger också webbplatsen en stabil integrationspunkt om konfigurationen ändras senare.

"use client";

import { SiteConsentProvider as SharedSiteConsentProvider } from "@simmalugnt-se/consent-ui";
import type { ReactNode } from "react";
import { consentConfig } from "./consent-config";

type Props = {
	children: ReactNode;
	locale?: string;
};

export function SiteConsentProvider({ children, locale }: Props) {
	return (
		<SharedSiteConsentProvider config={consentConfig} locale={locale}>
			{children}
		</SharedSiteConsentProvider>
	);
}

Lägg den lokala providern runt hela webbplatsen:

import type { ReactNode } from "react";
import { SiteConsentProvider } from "./site-consent-provider";

export function App({ children }: { children: ReactNode }) {
	return <SiteConsentProvider>{children}</SiteConsentProvider>;
}

Lägg till länken för cookieinställningar

Importera ConsentSettingsLink direkt i sidfoten. Komponenten renderar en knapp som öppnar inställningsdialogen.

import { ConsentSettingsLink } from "@simmalugnt-se/consent-ui";

export function Footer() {
	return (
		<footer>
			<ConsentSettingsLink>Cookieinställningar</ConsentSettingsLink>
		</footer>
	);
}

Länken måste ligga under SiteConsentProvider. Om konfigurationen har enabled: false ska webbplatsen inte rendera länken.

Lägg till skript som kräver samtycke

Installera c15t:s skriptadaptrar när webbplatsen använder en tjänst som ska starta efter samtycke:

npm install --save-exact @c15t/[email protected]

Lägg adaptern i webbplatsens konfiguration. Det här exemplet startar Google Tag Manager genom c15t:

import { googleTagManager } from "@c15t/scripts/google-tag-manager";
import type { SiteConsentConfig } from "@simmalugnt-se/consent-ui";

export const consentConfig = {
	siteName: "Min webbplats",
	categories: ["necessary", "measurement", "marketing"],
	scripts: [googleTagManager({ id: "GTM-XXXXXXX" })],
} satisfies SiteConsentConfig;

c15t styr bara skript som webbplatsen registrerar. Kontrollera därför den publicerade webbplatsen med consent-audit efter varje ny integration.

Anpassa texter och utseende

Använd messages i konfigurationen för att ersätta standardtexter. Använd följande CSS-variabler för webbplatsens utseende:

• --consent-font
• --consent-text
• --consent-muted
• --consent-surface
• --consent-border
• --consent-hover
• --consent-accent
• --consent-radius

Kontrollera installationen

Publicera webbplatsen och lägg dess URL i config/sites.yml. Kör sedan auditverktyget och granska den första rapporten.

Auditverktyget ändrar inte webbplatskod och godkänner inte nya fynd. Om rapporten visar en ny extern tjänst måste projektet först klassificera tjänsten och därefter styra dess laddning i koden.

Utveckla paketet lokalt

Installera paketet från ../consent-ui när du utvecklar paketet och webbplatsen samtidigt. Använd en publicerad, fast version i kod som ska driftsättas.

Paketet behåller lågnivåexporterna ConsentProvider, ConsentBanner, ConsentDialog och ConsentDialogLink för befintliga installationer.