Consenti
Tutorial — Frontend Only — Step 2 of 6

Configure

Pick a compliance mode and patch copy with profileOverride.

Pin a specific compliance mode instead of relying on auto-detect, and patch copy or buttons with profileOverride — a deep-merge on top of the resolved profile:

ts
const widget = new ConsentiSetup({
  compliance: { type: 'opt-in' }, // GDPR-model — or 'opt-out' for CCPA-model
  profileOverride: {
    mainBanner: {
      heading: 'We value your privacy',
      htmlText: 'We use cookies to improve your experience.',
      buttons: {
        'accept-all': { text: 'Accept All', style: 'primary', action: 'custom', cookies: '*' },
        'reject-optional': { text: 'Reject Optional', style: 'secondary', action: 'custom', cookies: '!' },
        'customize': { text: 'Customize', style: 'secondary', action: 'manage' },
      },
    },
  },
})

profileOverride is enough for most projects — see the Configuration and Profile reference pages for every option.

Scenario: more accurate geo-detection

compliance: { type: 'auto' }(the default) resolves the visitor's compliance group entirely client-side, from Intl.DateTimeFormat timezone + navigator.language — a heuristic, not real IP geolocation. There is no frontend-only hook to plug in your own country/region detector; the customization point for that lives on the backend, in compliance.geoDataProvider. Connect one and the frontend config barely changes:

Frontend — unchanged apart from pointing at your backend
ts
new ConsentiSetup({
  api: { enabled: true, baseUrl: 'https://your-site.com' },
  compliance: { type: 'auto' }, // now resolved server-side, not by browser heuristic
})
server.ts — your own geoDataProvider resolver
ts
createConsenti({
  // ...
  compliance: {
    type: 'auto',
    geoDataProvider: async ({ ip, timezone, language }) => {
      const res = await fetch(`https://api.mygeoip.com/${ip}`)
      const data = await res.json()
      return { country: data.country_code, region: data.region, locale: data.locale ?? null }
    },
  },
})

Most projects don't need a fully custom function — built-in 'geoip' and 'maxmind' resolvers cover most cases. See the Backend tutorial — Configure Backend step for those, and the full Geo-Routing & Auto-Detection guide for a comparison of every resolver.