Customer

Sign up to Citizen to get started.

Faster customer onboarding.

1. Add our registration SDK to the html header of your webpage.

<script src="https://sdk.citizen.is/sdk/sdk-registration.js"><\script>

2. Configure your registration form.

Required: 'authorizationCitizen' - your entity public API key.
Optional: 'redirectSuccessUrl' - leave blank to keep your form action.
Optional: 'checkPasswords' - default 'true' checks the https://www.haveibeenpwned.com DB.

<script>

window.ctznRegistrationInit = function () {
CITIZENREGISTRATION.init({

// entity public API key
authorizationCitizen: '2a56c3c7-2802-4666-a925-df65130efcea',

redirectSuccessUrl: '/demo/register/success.html',
// redirect on success
redirectSuccessUrl: '/demo/register/success.html',
// check for compromised passwords
checkPasswords: true,
// password format in regex
passwordRegex: /^[a-zA-Z]\w{3,14}$/,

// label text
labelTitleStr : 'your title',
labelFullNameStr : 'your name',
labelAddress1Str : 'your address',
labelMobileStr : 'your mobile',
labelCityStr : 'your city',
labelStateStr : 'your state',
labelZipStr : 'your zip',
labelCountryStr : 'your country',
labelEmailStr : 'your email',
labelPassword1Str : 'your password',
labelPassword2Str : 'confirm password',

// placeholder text
placeholderFullNameStr : 'your name is required',
placeholderEmailStr : 'your email is required',
placeholderPassword1Str : '8 chars upper/lower/number'
})
};
</script>

3. Tag your password fields (including the confirm). And make sure you encapsulate them with a div marked with "ctznPasswords"

<div id="ctznPasswords">

<input type="password" id="password" class="ctznInputPassword1" value="">

<input type="password" id="password2" class="ctznInputPassword2" value="">

</div>


4. Add ‘Go Passwordless’ toggle (with carousel) to your webpage.

Copy and paste the container tags into your HTML page:

<div id="ctznPasswordlessToggle" />

<div id="ctznPasswordlessCarousel" />

5. Tag your form elements with Citizen classes (required, regex and Citizen attributes).

Add css classnames to each form element using the 'ctzn' tag notation.

Citizen needs an email adddress to create an account.

<span class="ctznLabelEmail"> // labels

<input type="text" class="ctznInputFullName" id="yourFormId" > // form inputs
// email is default required and does not need a tag
<input type="text" class="ctznInputEmail ctznRequired" id="yourFormId" > // form inputs

6. Add the ‘register’ call to your submit button.

Citizen handles the form pre-submit action (Citizen account creation) seamlessly.

<input type="submit" class="ctznSigninButton ctznButtonRegisterSubmit" value="REGISTER"/>

Once clicked, your customer will be sent an email to onboard to the Citizen app.

7. Initialise the registration form.

<script>

window.ctznRegistrationInit();

</script>