The Consent Preference JavaScript library enables recording the users' consent actions, which are referred to as “subjects”.
In this chapter, we are providing a JS library for the above feature.
To install the Consent Preference JS widget, insert your setup code on your website, before closing the </head> tag as mentioned in the code below.
<script src="https://cdn.primeconsent.com/cmp/consent-preference/consent-preference-sdk.js" ></script> The init function given below defines how the library is initiated instantly and this function is required to be implemented on your web page that has the Consent Preference module.
It is possible to add a callback function as a second parameter of the init function. The callback function will be then called once the library has been loaded.
The following are the parameters that you can use inside the init configuration object (that is the first parameter on the init function which contains the AppID) to customize, for example, the logger or the behavior of the library.
| Key | Required | Type | Note |
PropID | Required | String | An ID generated for your property within Privacy Pillar Portal |
ShowLogs | Optional | Boolean | By default, false |
LogType | Optional | String | Use error, log, warn |
OwnerID | Optional | String | A unique ID of alpha/numeric value to differentiate a user among multiple users of your account |
UseMethodType | Optional | String | GET and POST only (default method POST) |
MaskIP | Optional | Boolean | By default, false |
An example code concerning the above parameters is given below.
const privacypillar= window.CP_SDK_PRIVACYPILLAR.init({ PropID: 'yourPropID', })To record automatically the consents provided using a submission form, you can either use the load function or the submit function.
The load function enables integrating the consent object's fields to input fields of your form and automatically recording the consent at submit time.
privacypillar.load({ submitBtnID: 'submit-btn', form: { formID: "form-id", map: { consent: { email: 'your_email', first_name: 'first_name', last_name: 'last_name', data_source: 'data_source', verified: 'verified', auth_id: 'auth_id', country: 'country', ip_address: 'ip_address' }, exclude: ['password', 'confirm_password'] } }, consent: { legalNotices: [ { identifier: "terms_and_conditions", version: 1, content: 'https://example.com/term-and-condition' }, { identifier: "privacy_policy", version: 2, content: 'https://example.com/privacy-policy' } ], preferences: [ { preference: 'terms_and_conditions', allow: true }, { preference: 'privacy_policy', allow: true }, { preference: 'other_criterion', allow: true }, ], }, autodetectIpAddress: true, }).then(res => { if (res.success) { // success response } else { // Error Handle } })The parameters used in the above codes are described below.
| Key | Required | Type | Note |
submitBtnID | Optional | String or DOM element | If not provided call user using CP_SDK_PRIVACYPILLAR.send() |
form | No/Yes if consent is not defined | Object | See Form Object |
consent | No/Yes if form is not defined | Object | See Consent Object |
autodetectIpAddress | Optional | Boolean | A parameter that enables or disables the IP autodetect. 'True' by default |
Since the form object is optional, an example of the structure of the form object under the formID parameter is given below which is passed to load and submit functions.
| Key | Required | Type | Note |
formID | Optional | String | The string (ID) or the DOM element of the form from which you want to detect the data |
map | Yes, if formID is defined | Object | Map consent attributes directly to the corresponding input's name attribute |
consent | No/Yes if formID is not defined | Object |
|
email | Yes | String | |
first_name |
| String | |
last_name | |||
data_source | |||
verified | |||
auth_id | |||
country | |||
ip_address | |||
exclude | Optional | Array | A list of fields name that we would like to exclude from proofs |
An example of the structure of the form object under the formID parameter is given below.
| Key | Required | Type | Note |
consent | Optional | Object | |
leagalNotices | Optional | Array | Array containing multiple leagalNotices data |
identifier | String | ||
version | String | Existing value remains until you change | |
content | String | ||
proofs | Optional | Array | Array containing multiple proofs data |
content | String | ||
form | String | ||
preferences | Optional | Array | Set of key-values with user preferences for the consent action |
preference | Boolean |
|
For more precious understanding, see an example of load function HTML code below.
<html> <head> <title>Consent Preference</title> </head> <body> <form id="form-id"> <!-- subject --> <input type="hidden" value="123ad234" name="ip_address"/> <input type="hidden" value="public" name="data_source"/> <input type="hidden" value="true" name="verified"/> <input type="hidden" value="9045244484" name="auth_id"/> <p> First name:<br/> <input type="text" name="first_name"/> </p> <p> Last name:<br/> <input type="text" name="last_name"/> </p> <p> Country :<br/> <input type="text" name="country"/> </p> <p> Email<br/> <input type="text" name="your_email"/> </p> <p> Password<br/> <input type="password" name="password"/> </p> <p> Confirm Password<br/> <input type="password" name="confirm_password"/> </p> <input type="button" value="Submit" id="submit-btn"/> </form> <script src="https://cdn.primeconsent.com/cmp/consent-preference/consent-preference-sdk.js"></script> <script> const privacypillar = window.CP_SDK_PRIVACYPILLAR.init({ PropID: '083f0a2a-b70f-4132-ac8f-e326e6885b5d', // Your Current Property ID ShowLogs: true, // Show Console Logs OwnerID: '12345' }) privacypillar.startRecording(); privacypillar.load({ submitBtnID: 'submit-btn', form: { formID: "form-id", map: { consent: { email: 'your_email', first_name: 'first_name', last_name: 'last_name', data_source: 'data_source', verified: 'verified', auth_id: 'auth_id', country: 'country', ip_address: 'ip_address' }, exclude: ['password', 'confirm_password'] } }, consent: { legalNotices: [ { identifier: "Terms and Conditions", version: 1, content: 'https://example.com/terms-and-conditions' }, { identifier: "Privacy Policy", version: 2, content: 'https://example.com/privacy-policy' } ], preferences: [ { preference: 'terms_and_conditions', allow: true }, { preference: 'privacy_policy', allow: true }, { preference: 'other_criterion', allow: true }, ], }, autodetectIpAddress: true, }).then(res => { console.log('res', res); }) </script> </body></html> The sendData function must be used in conjunction with the load function and triggers the consent object's recording with the values of the input fields that have been bound by a prior call to the load function.
function validateForm() { if (isValidForm()) { // the form has been validated privacypillar.CP_SDK_PRIVACYPILLAR.send(); }}The submit function enables sending the consent data to Privacy Pillar APIs, that is to record the consent. This submit function can be of two types. 1) Submit with value and 2) Submit by event.
The user can submit the values when the sendData() function gets manually called. An example code is given below.
privacypillar.submit({ consentData: { consent: { email: 'myemail@privacypillar.com', first_name: 'Jason', last_name: 'David', data_source: 'private', verified: true, auth_id: 'abc123', country: 'USA', ip_address: '192.168.1.4', additional_data: { // applicable for submit function with value username: 'jason123', status: true, result: 'pass' } }, preferences: [ { preference: 'terms_and_conditions', allow: true }, { preference: 'privacy_policy', allow: true }, { preference: 'other_criterion' allow: true }, ], }, legalNotices: [ { identifier: 'term1', version: 1, content: 'term1_Content' }, { identifier: 'term2', version: 2, content: 'term2_Content' } ], proofs: [ { content: '{"first_name": "Jason", "last_name": "David", "email": "myemail@privacypillar.com" }', form: '<form action="/action" method="POST"><p><label>First Name</label><input type="text" name="first_name" /></p><p><label>Last name</label><input type="text" name="last_name" /></p><p><label>E-mail</label><input type="email" name="email" /></p><input type="submit" /></form>' } ], autodetectIpAddress: true, )Unlike the load function, by default the submit function sends consent object to our server instead of local storage.
Parameters
| Key | Required | Type | Note |
consent | Optional | Object | Fetches the form values directly to the object |
email | Required | String | |
first_name | Optional | Object | |
last_name | |||
country | |||
data_source | |||
verified | |||
auth_id | |||
ip_address | |||
additional_data | Optional | Object | Any key-value pair |
leagalNotices | Optional | Array | Array containing multiple leagalNotices data |
identifier | String | ||
version | String | Existing value remains until you change | |
content | String | ||
proofs | Optional | Array | Array containing multiple proofs data |
content | String | ||
form | String | ||
preferences | Optional | Array | Set of key-values with user preferences for the consent action |
preference | Boolean |
|
See an example HTML code of Submit Function with Value below.
<html> <head> <title>Consent Preference</title> </head> <body> <form id="form-id"> <!-- subject --> <input type="hidden" value="123ad234" name="ip_address"/> <input type="hidden" value="public" name="data_source"/> <input type="hidden" value="true" name="verified"/> <input type="hidden" value="9045244484" name="auth_id"/> <p> First name:<br/> <input type="text" name="first_name"/> </p> <p> Last name:<br/> <input type="text" name="last_name"/> </p> <p> Country :<br/> <input type="text" name="country"/> </p> <p> Email<br/> <input type="text" name="your_email"/> </p> <p> Password<br/> <input type="password" name="password"/> </p> <p> Confirm Password<br/> <input type="password" name="confirm_password"/> </p> <input type="button" onclick="submitData()" value="Submit" id="submit-btn"/> </form> <script src="https://cdn.primeconsent.com/cmp/consent-preference/consent-preference-sdk.js"></script> <script> const privacypillar = window.CP_SDK_PRIVACYPILLAR.init({ PropID: '083f0a2a-b70f-4132-ac8f-e326e6885b5d', // Your Current Property ID ShowLogs: true, // Show Console Logs OwnerID: '12345' }) privacypillar.startRecording(); function submitData() { privacypillar.submit({ consentData: { consent: { // Provide your form value directly to the object email: 'example@privacypillar.com', // required Type String first_name: 'Rahul', // Optional ;Type Sting last_name: 'Sharma', // Optional ;Type Sting fullName: 'Rahul Sharma', // Optional ;Type Sting data_source: 'private', // Private or Public ; // Optional ;Type Sting verified: true, // Email Varified or not // Optional ;Type boolean auth_id: '', // auth_id // Optional ;Type Sting country: 'india', ip_address: '1.02.12', additional_data: { // applicable for submit function with value username: 'abcd', status: true } }, exclude: ['password', 'last_name', 'country'], preferences: [ // Optional {preference: 'terms_and_conditions', allow: true}, {preference: 'newsletter', allow: true}, {preference: 'privacy_policy', allow: true}, { preference: 'your-custom-preference', allow: true } ], }, legalNotices: [ // Optional { identifier: 'term', version: 1, content: 'test Content' }, { identifier: 'fake', version: 123, content: 'Fake Content' } ], proofs: [ // Optional { content: '{ "first_name": "John", "last_name": "Doe", "email": "john@example.com" }', form: document.getElementById('form-id').outerHTML } ], autodetectIpAddress: true, // A parameter that enable or disable the ip autodetect. Default to: true }, (result) => { }); } </script> </body></html>The User can submit the form by an on-click event. An example code is given below.
function submitData() { privacypillar.submit({ form: { formID: "form-id", // Form Element Id Type String; // The string (ID) or the DOM element of the form from which you'd like to detect the data map: { // optional: map consent attributes directly to the corresponding // input's "name" attribute consent: { // Getting Value By Name attribute // required email: 'your_email', // Required; Type String // Name attribute first_name: 'first_name', // Getting Value By Name attribute// Optional ; Type Sting last_name: 'last_name', // Optional ;Type Sting Name attribute data_source: 'data_source', // Optional ; Type Sting Name attribute verified: 'verified', // Optional ; Type Sting Name attribute auth_id : 'auth_id', // Optional ; Type Sting Name attribute country: 'country', // Name attribute ip_address: 'ip_address' // Name attribute }, exclude: ['password', 'confirm_password'] // it will ignore feild value in proof } }, consent: { legalNotices: [ { identifier: "terms_and_conditions", version: 1, content: 'https://example.com/term-and-condition' }, { identifier: "privacy_policy", version: 2, content: 'https://example.com/privacy-policy' } ], preferences: [ { preference: 'terms_and _conditions', allow: true }, { preference: 'news_letter' , allow: false }, { preference: 'other_preference', allow: false }, ], }, autodetectIpAddress: true, }).then(res => { console.log('Func RES::::::::', res) }) }See Form Object and Consent Object for the descriptions of the parameters.
Also, see the example below.
<html> <head> <title>Consent Preference</title> </head> <body> <form id="form-id"> <!-- subject --> <input type="hidden" value="123ad234" name="ip_address"/> <input type="hidden" value="public" name="data_source"/> <input type="hidden" value="true" name="verified"/> <input type="hidden" value="9045244484" name="auth_id"/> <p> First name:<br/> <input type="text" name="first_name"/> </p> <p> Last name:<br/> <input type="text" name="last_name"/> </p> <p> Country :<br/> <input type="text" name="country"/> </p> <p> Email<br/> <input type="text" name="your_email"/> </p> <p> Password<br/> <input type="password" name="password"/> </p> <p> Confirm Password<br/> <input type="password" name="confirm_password"/> </p> <input type="button" onclick="submitData()" value="Submit" id="submit-btn"/> </form> <script src="https://cdn.primeconsent.com/cmp/consent-preference/consent-preference-sdk.js"></script> <script> const privacypillar = window.CP_SDK_PRIVACYPILLAR.init({ PropID: '083f0a2a-b70f-4132-ac8f-e326e6885b5d', // Your Current Property ID ShowLogs: true, // Show Console Logs OwnerID: '12345' }) privacypillar.startRecording(); function submitData() { privacypillar.submit({ form: { formID: "form-id", // Form Element Id Type String; // The string (ID) or the DOM element of the form from which you'd like to detect the data map: { // optional: map consent attributes directly to the corresponding // input's "name" attribute consent: { // Getting Value By Name attribute // required email: 'your_email', // Required; Type String first_name: 'first_name', // Getting Value By Name attribute// Optional ; Type Sting last_name: 'last_name', // Optional ;Type Sting data_source: 'data_source', // Optional ; Type Sting verified: 'verified', // Optional ; Type Sting auth_id : 'auth_id', // Optional ; Type Sting country: 'country', ip_address: 'ip_address' }, exclude: ['password', 'confirm_password'] // it will ignore feild value in proof } }, consent: { legalNotices: [ { identifier: "Terms and Conditions", version: 1, content: 'https://example.com/terms-and-conditions' }, { identifier: "Privacy Policy", version: 2, content: 'https://example.com/privacy-policy' } ], preferences: [ { preference: 'terms_and_conditions', allow: true }, { preference: 'privacy_policy', allow: true }, { preference: 'other_criterion', allow: true }, ], }, autodetectIpAddress: true, // Type Boolean // Optional , // A parameter that enable or disable the ip autodetect. Default to: true }).then(res => { console.log('Func RES::::::::', res) }) } </script> </body></html> To start and stop the session recording manually, follow the code example given below.
// Start the session recording// Note: Session Recording will auto stop after submitting the consent privacypillar.startRecording();// Stop the session recording manually privacypillar.stopRecording();