Consent Manager

Install

NPM

npm install @weahead/consent-manager

Yarn

yarn add @weahead/consent-manager

Configuration

Modal

  return (
    <Modal
      // optional, defaults to `Cookies för analys och utveckling`
      analyticsLabel={String}
      // optional, defaults to `Godkänn alla`
      approveAllLabel={String}
      // optional, defauts to `Godkänn val`
      approveLabel={String}
      // required, string containing the information text for when the modal opens
      content={String}
      // optional, defaults to `Cookies för externt innehåll/teknik (t.ex. sociala medier, ljud, video)`
      externalLabel={String}
      // optional, defaults to `Nödvändiga cookies, tekniker och funktioner`
      functionLabel={String}
      // optional, defaults to `Fler inställningar`
      moreSettingsLabel={String}
      // required, string containing information for when selecting cookies
      settingsContent={String}
      // optional, defaults to `Vi använder cookies`
      title={String}
      // defaults to `Återkalla medgivande`
      revokeLabel={String}
    />
  )

Styling

Control the styling of the modal by declaring values for these CCS-variables

:root {
  /* COLORS */
  --cmp-theme-background: "";                 /* defaults to #f8f8f8 */
  --cmp-theme-black: "";                      /* defaults to #000000 */
  --cmp-theme-disabled: "";                   /* defaults to #b8b7bf */
  --cmp-theme-disabled-background: "";        /* defaults to #e0dfe3 */
  --cmp-theme-link: "";                       /* defaults to #2daf9c */
  --cmp-theme-link-text: "";                  /* defaults to #000 */
  --cmp-theme-primary: "";                    /* defaults to #224 */
  --cmp-theme-primary-background: "";         /* defaults to #6449da */
  --cmp-theme-primary-button-text: "";        /* defaults to #000000 */
  --cmp-theme-primary-button-text-hover: "";  /* defaults to #000000 */
  --cmp-theme-primary-border-color: "";       /* defaults to #224 */
  --cmp-theme-secondary: "";                  /* defaults to #6449da */
  --cmp-theme-secondary-background: "";       /* defaults to #FFF */
  --cmp-theme-secondary-border-color: "";     /* defaults to #000 */
  --cmp-theme-secondary-button-text: "";      /* defaults to #000000 */
  --cmp-theme-secondary-button-text-hover: "";/* defaults to #000000 */
  --cmp-theme-selected: "";                   /* defaults to #2daf9c */
  --cmp-theme-white: "";                      /* defaults to #FFF */

  /* FONTFAMILY */
  --cmp-theme-ff: "";                   /* defaults to Arial, Georgia, sans-serif */
  --cmp-theme-ff-secondary: "";         /* defaults to "Times New Roman", sans-serif */

  /* FONTSIZE */
  --cmp-theme-xsmall: "";               /* defaults to 1.2rem */
  --cmp-theme-smaller: "";              /* defaults to 1.4rem */
  --cmp-theme-small: "";                /* defaults to 1.6rem */
  --cmp-theme-large: "";                /* defaults to 2.2rem */

  /* FONTWEIGHT */
  --cmp-theme-medium: "";                 /* defaults to 400 */
  --cmp-theme-bold: "";                 /* defaults to 700 */
}

GA4 Consent mode

The ConsentManager accepts a boolean for if Consent mode is enabled in Google Analytics. If enabled, the consent state is updated for each change of cookie preference.

License

X11