Inclure la balise script seulement sur la page de votre site acceuillant la trousse :
<script async src="https://quatsous.trousse-vsd.com/app.bundle.js"></script>
Il est fortement conseillé de charger la trousse en mode async car le bundle est assez volumineux, exemple alternatif de chargement via un module JS interne :
this.script = document.createElement("script");
this.script.async = true;
this.script.src = VODKIT_SCRIPT_SRC;
// append script to document
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(this.script);
// when VSD-KIT script has loaded
this.script.onload = () => {
console.warn(`VSD-KIT script has loaded, act act!`);
};
Vous pouvez placer autant d'éléments que voulu pour ouvrir la trousse, il suffit simplement d'ajouter un attribut dataset data-vod-kit-open
<button data-vod-kit-open>Ouvrir Trousse VSD</button>
Un api de base est disponible pour contrôler l'ouverure ou fermeture de la trousse VSD :
window._vodkit.api.open();
window._vodkit.api.close();
Un événement JS custom est invoqué quand l'application est "ready", vous pouvez ajouter à vos module internes un événement onVodkitReady connecté sur window :
window.addEventListener('onVodkitReady', function() {
console.warn("VODKIT ready state is dispatched from a parent context");
});
Les données affichées dans la fenêtre modal de la trousse sont aussi disponible via cet API. C'est envoyé tel quel de notre CMS, disponible pour personnalisation de la page qui déclanche la trousse au besoin.
window._vodkit.data