Cookie Consent

Cookie consent banner and popup with action callback after user consent.

import '@wevisdemo/ui/styles/cookie-consent.css';
import WvCookieConsent from '@wevisdemo/ui/{react,vue,svelte}/cookie-consent';

const cookieOptions = ['Functionality', 'Performance', 'Advertising'];

function onCookieAccept(option) {
  if (option['Performance']) {
    // Initialize or enable analytics
  }
}

<WvCookieConsent
  policyUrl="https://punchup.world"
  cookieOptions={cookieOptions}
  onAccept={onCookieAccept}
/>

Props

Name	Type	Default
policyUrl	string
cookieOptions	string[]	[]
daysToExpire	number	30
onAccept	(option: Record<string, boolean>) => void	undefined

The cookieOptions can be an array of any string representing cookie type, which showing in cookie setting option pop-up. Please consult PM which cookie type needed to be included in each project.

The option parameter for onAccept function will be an object including keys for each cookieOptions and coresponsed boolean represent user option. For example, if the cookieOptions are

const cookieOptions = ['Functionality', 'Performance', 'Advertising'];

the option will have the following type

type Option {
  Functionality: boolean
  Performance: boolean
  Advertising: boolean
}

Please consult with PM or Tech Lead about cookie’s type in your project.

Behavior

When mounted, the component will look for cookie setting in localStorage

• If found
  • The setting is loaded from localStorage
  • onAccept will be called with the setting for option parameter
  • No pop up will be shown
• If not
  • The banner is showed

When user accept all cookieor save selected options from checkboxes

• The setting is saved to localStorage
• onAccept will be called with the setting for option parameter
• Pop up/ Banner then will be closed