Cas 2 : Remplacer votre checkbox Existante par une checkbox Axeptio
1. Présentation vidéo
2. Exemple concret
Dans le cas d'un de vos formulaires ou la checkbox est déjà préexistante
II. Intégration du script
Pour relier la checkbox préexistante à Axeptio vous devez mettre une fonction javascript dans le footer de votre site que vous intégrez directement avec le SDK.
Voici comment procéder :
void0===window._axcb && (window._axcb = []);window._axcb.push( function ( axeptio ) {// La variable ClientNode doit correspondre à l'endroit du site ou vous souhaitez ajouter la nouvelle checkbox// La variable clientNode ne remplacera pas l'ancienne checkbox mais va en ajouter une nouvelle// le selecteur CSS doit correspondre à l'élément cible dans lequel vous souhaitez injecter la checkbox var clientNode =document.querySelector(('SELECTEUR_CSS_DE_L EMPLACEMENT_NOUVELLE_CHECKBOX');// La variable elementHide est une variable qui va devoir eglober tous les éléments à faire disparaitre.// Cette variable doit comprendre notamment l'input checkbox et le texte qui s'y rapporte que vous souhaitez cacher // le selecteur CSS doit correspondre aux éléments cibles que vous souhaitez cacher var elementToHide =document.querySelector('SELECTEUR_CSS_DES_ELEMENTS_A_MASQUER');// La variable ClientCheckbox doit correspondre à l'input checkbox déja présente sur le site// Dans le cas de cette variable nous souhaitons relier l'ancienne checkbox à la nouvelle // Lorsque le client va cliquer sur la nouvelle cela validera aussi la précédente et vous pourrez donc relier celle-ci à tous vos formulaires
// le selecteur CSS doit correspondre à l'ancienne input checkbox var clientCheckbox =document.querySelector('SELECTEUR_CSS_DE_LA_CHECKBOX_CLIENT');// Cette variable va créer une span pour déposer la nouvelle checkbox// Attention : Il ne faut faire aucune modification pour cette variable var axeptioSpan =document.createElement( 'span' );axeptioSpan.id ="span-axeptio";clientNode.appendChild(axeptioSpan);axeptio.createConsentCheckbox( {// Le nom du service est soit "processings" dans le cas des consentements marketing soit "contracts" dans le cas des consentements contracts
// Il faut modifier le Type de consent par ce que vous souhaitez intégrer service:'TYPE_DE_CONSENT',// Identifier est l'identifiant de la checkbox que vous souhaitez cibler consentements marketing ou consentement contractuels selon le cas
// Se reposerter au cas 1 pour le trouver// Modifier l'identifiant par le votre identifier:'IDENTIFIANT_CONSENT',// Le reste n'est pas à modifier 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"});
Félicitation! Vous pouvez maintenant intégrer Axeptio sur tous vos formulaires.
Cette méthode est compatible avec tous les form builder de type Contatct form7, elegant theme etc ...