Sign up to Citizen to get started.

Request, record and manage consent for regulatory compliance.
Suitable for GDPR compliance, PSD2 and payment scheme regulations.

This page covers web-based consent via modal..
See identify for mobile & biometric consent.

1. Add our consent SDK to the html header of your page.

In some cases consent management can be done directly via our API, bypassing this modal.

<script src="">

<script src=""> \\for use of some utility functions

2. Initialise the Citizen consent modal.

Customise the fields as appropriate. If required, all fields can be customised for different languages.

<script type="text/javascript">

window.citizenConsentAsyncInit = function () {


'integrationType': 'WEB',
'entityPublicApiKey': '6a1a125a-5895-432d-9c8c-21eb98120ceb',
'issuingDomain': '',

// custom fields for the modal
'headerText': 'Your data agreement:',
'consentText': 'You agree to the following:',
'dataAgreementText': 'How we use your data:',
'emailText': 'Your email address:',
'dataText': 'The data we store:',

// call to actions for buttons
'ctaConfirmText': 'I AGREE',
'ctaDeclineText': 'I do not agree.',

// confirm messages for post consent CTA clicks (GDPR)
'consentConfirmMessage': 'Your consent was recorded.',
'consentDeclineMessage': 'Your consent was declined.',

// field name definitions
'NAME': 'full name',
'DOB': 'date of birth',
'POB': 'place of birth',
'NATIONALITY': 'nationality',
'ADDRESS': 'address',
'PHONE': 'phone number',
'GENDER': 'gender',
'EMAIL': 'email',
'CARD_ON_FILE': 'credit or debit card',
'OTHER': 'other personal data'

// setting false prevents closure without user action
'closeOnClickAway': true

3. Provide a callback function for the consent modal response.

In the demo here, we show a tick if the consent has been granted.
Common use cases include user redirection or blocking.


function citizenCallback(consentResponse){
if (consentResponse.consentStatus === 'GRANTED') { = 'visible';
} else { = 'hidden';

4. Open the consent modal.

Add the consent SDK call before requesting consent from the user. If the agreement is approved, the callback to the page will allow the user journey to proceed.

The consent response is provided when the user clicks on the modal.

The response can be passed to your own callback function and recorded in the Citizen enterprise app..

<script type="text/javascript">

function checkConsent(email) {
window.CITIZENCONSENT.checkConsent(email, 'NAME,DOB,POB,CARD_ON_FILE', "Marketing")
.then(consentResponse => {


In this demo, the legal agreement ‘Marketing’ is set up in the Citizen enterprise app.

5. Open the modal on an event (such as page load).

In the demo we open the modal on a button onclick. You can also open on page load, or conditionally (ie if user is in/from the EU)


<body onload="citizenCallback(consentResponse)">