1. Video presentation

2. Concrete example

If you want to create a new checkbox that was'nt already on your website

II. Script integration

To bind the already existing checkbox to Axeptio you have to add a Javascript function in the footer of your site, that you integrate directly with the SDK. Here is how :

void 0 === window._axcb && (window._axcb = []);
  window._axcb.push(function(axeptio) {
 
   axeptio.createConsentCheckbox({
//The name of service is "processings" in the case of marketing consents or "contracts" in the case of contracts consents.
     service: 'processings',
//identifier is the identifier of the checkbox you want to target, marketing consents or contracts consents.
//We'll see later where to find it
     identifier: 'tOken_of_service',
     node: document.getElementById('TODO change to the ID of the target div'),
     
     embed: {
// Here you will manage the texts to inform the final user about the purpose of this checkbox
       checkboxText: "I agree to receive the newsletter",
       checkboxDetailsText: "know more"
     }
   });
 });

III. Find the identifier of your service

To find the identifier, it is necessary to go to the service you want.

Example : For a marketing checkbox:

1. Go to marketing consents module

2. Choose the checkbox you want to parameter

3. You'll see the screen below

In your project URL, you'll find in blue the data-id of your project, then in red the token of your identifier.

Now all you need to do is replace the "tOken_of_service" with the token in red in the Javascript code and mention the CSS selector that you want to use as an anchor in the part "TODO change to the ID of the target DIV"

Your project ID is linked with the SDK integration for cookies.

3. Modify the checkbox to "Required"

In some cases you'll want to make the consent on your checkbox mandatory for your form submission. It's the case for submission of newsletters forms. Here is how :

// Function to make the consent "required"
document.querySelector(#span-axeptio > div > label > input).setAttribute('required', 'required');