Case 2 : Replace your existing checkbox with an Axeptio checkbox

1. Video presentation

2. Concrete Example

In the case of a form with an already existing checkbox

II. Script integration

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

void 0 === window._axcb && (window._axcb = []);
window._axcb.push( function ( axeptio ) {
// The variable ClientNode must correspond to the site area where you want to add the new checkbox
// The variable clientNode won't replace the old checkbox but will add a new one
// The CSS selector must correspond to the target element in which you want to inject the checkbox
var clientNode = document.querySelector(('CSS_SELECTOR_OF_TARGET_ELEMENT');
// The variable elementHide is a variable that must include all elements to hide
// This variable must contain aswell the checkbox input and the text linked to it
// The CSS selector must correspond to the target elements that you want to hide
var elementToHide = document.querySelector('CSS_SELECTOR_OF_ELEMENTS_TO_HIDE');
// The variable ClientCheckbox must correspond to the checkbox input already existing.
// For this variable we want to bind the old checkbox to the new one
// When the user will click on the new one it will also check the old one, you can then link to all your forms
// The CSS selector must correspond to the old checkbox
var clientCheckbox = document.querySelector('CSS_SELECTOR_OF_OLD_CHECKBOX');
// This variable will create a span to integrate the new checkbox
// Warning : Don't change anything in this variable
var axeptioSpan = document.createElement( 'span' );
axeptioSpan.id = "span-axeptio";
clientNode.appendChild(axeptioSpan);
axeptio.createConsentCheckbox( {
// Name of the service is "processings" for marketing consents or "contracts" for contracts consents
// Modify the type of consent with the type you want to add
service: 'TYPE_OF_CONSENT',
// Identifier is the identifier of the checkbox you want to target: marketing consents or contracts consents
// Go to case 1 to find it
// Change identifier with yours
identifier: 'IDENTIFIANT_CONSENT',
// Don't change the rest
node: document.getElementById('span-axeptio'),
embed: {
checkboxText: "J'accepte de recevoir la newsletter.",
checkboxDetailsText: "En savoir plus",
onChange:function(){clientCheckbox.click()}
}
} );
elementToHide.style.display = "none"
});