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"
});