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 breached password databases.

<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 breached passwords
checkPasswords: true,
// password format in regex
passwordRegex: /^[a-zA-Z]\w{3,14}$/,

// label text
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'

// the text for your registration button
buttonDefaultText : 'REGISTER'
})
};
</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 this container tags into your HTML page:

<div id="ctznPasswordlessWidget" />

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. Style your registration submit button.

// add this at the end of your page and edit to style your custom registration button
<style>

.ctznSigninButtonDefault {
transition: all 0.3s ease-in-out;
font-size: 20px;
text-align: center;
height: 60px;
width: 100%;
max-width: 270px;
padding: 23px 23px;
margin: 0;
border-radius: 7px;
border: 1px solid white;
background-color: white;
color: red;
}

.ctznSigninButtonDefault:hover {
max-width: 270px;
background-color: red;
color: white;
}

</style>

7. Initialise the registration form.

<script>

window.ctznRegistrationInit();

</script>