Le badge Digital Forest est simple à installer, ci-dessous vous trouverez différentes méthodes selon votre cas et vos compétences techniques.
 |
 |
Si vous rencontrez un problème lors de l'intégration de votre badge, n'hésitez pas à nous contacter ainsi nous pourrons vous accompagner dans cette démarche.
Pour les utilisateurs de Wordpress (débutants)
Pour intégrer votre badge dans une page de votre site WordPress, veuillez vous rendre dans l'espace d'administration WordPress, puis aller éditer la page ou vous souhaitez intégrer le badge.
1. Cliquez sur le bouton "+" en haut à gauche de l'écran de modification de votre page (cf capture ci-dessous)
2. Tapez "html" dans la zone de recherche puis cliquez sur "HTML personnalisé" (cf capture ci-dessous)
3. Un bloc est apparu dans votre page, maintenant vous devez choisir la manière d'afficher votre badge selon vos besoins :
Vous pouvez ajouter le badge de manière statique (il sera figé dans votre page la ou vous mettez le code) ou vous le souhaitez dans les pages de votre site, en utilisant le code suivant :
<div id="dfbox"><div id="dfindex"></div></div>
<script src="https://digitalforest.fr/carbon_index/df.min.js" defer></script>
Si vous souhaitez utiliser la version "dark", ajoutez la class "darkdf" dans la div "dfindex", voici le code complet :
<div id="dfbox"><div id="dfindex" class="darkdf"></div></div>
<script src="https://digitalforest.fr/carbon_index/df.min.js" defer></script>
Une version flottante (reste toujours affiché à l'écran, en bas à droite) est également possible en ajoutant une div avec la class "dfbubble", voici le code complet :
<div class="dfbubble">
<div id="dfbox"><div id="dfindex"></div></div>
<script src="https://digitalforest.fr/carbon_index/df.min.js" defer></script>
</div>
Choisissez donc le code qui correspond à votre besoin, puis collez le dans le nouveau bloc "HTML personnalisé" comme dans la capture ci-dessous :
4. Sauvegardez votre page puis constatez l'affichage du badge sur votre page.
Vous pouvez répéter cette opération sur chaque page ou vous souhaitez afficher le badge.
Si vous utilisez Elementor, de la même manière vous devez créer un bloc HTML personnalisé et y copier le code désiré.
Pour les développeurs (confirmés)
Vous pouvez ajouter le badge de manière statique ou vous le souhaitez dans les pages de votre site, en utilisant le code suivant :
<div id="dfbox"><div id="dfindex"></div></div>
<script src="https://digitalforest.fr/carbon_index/df.min.js" defer></script>
Si vous souhaitez utiliser la version "dark", ajoutez la class "darkdf" dans la div "dfindex" comme suit :
<div id="dfbox"><div id="dfindex" class="darkdf"></div></div>
<script src="https://digitalforest.fr/carbon_index/df.min.js" defer></script>
Une version flottante (en bas à droite) est également possible en ajoutant une div avec la class "dfbubble"
<div class="dfbubble">
<div id="dfbox"><div id="dfindex"></div></div>
<script src="https://digitalforest.fr/carbon_index/df.min.js" defer></script>
</div>
Vous pouvez également remplacer la div "dfbubble" par une class de votre choix (selon l'intégration souhaitée dans votre site en créant les règles CSS de votre choix)
Remarques :
- Si vous procédez à des modifications sur votre site pour améliorer votre indice, vous devrez patienter 24 pour voir les changements (ou alors, supprimez le cache "local storage")
- Si vous rencontrez un problème lors de l'intégration de votre badge, n'hésitez pas à nous contacter ainsi nous pourrons vous accompagner dans cette démarche.
Rappel : vous devez être client d'une offre mutualisée Web ou Web & Email pour que le badge fonctionne.
