Intégrez votre compteur de pétition sur votre site/blog
Il suffit de copier/coller le code ci-dessous dans un bloc html sur votre site et modifier les 3 variables suivantes :
1) la fin de l’url de votre pétition
Prenons l’exemple suivant : https://www.leslignesbougent.org/petitions/pour-la-reintegration-des-15-000-soignants-suspendus-8410/
2) Le titre de votre pétition
3) Votre objectif de signature
Voici un exemple d’intégration d’un bloc HTML si vous utiliser un site avec WordPress et Elementor :
https://themes.artbees.net/docs/adding-html-codes-directly-in-page-using-elementor/
Si vous êtes sur Wix :
https://support.wix.com/en/article/wix-blog-adding-html-code-to-a-blog-post
Dans le cas où vous utilisez une autre solutions n’hésitez pas à nous contacter pour demander de l’aide à notre équipe via notre formulaire de contact.
Ci-dessous le code à copier dans votre site
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<script data-minify="1" src="https://blog.leslignesbougent.org/wp-content/cache/min/1/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js?ver=1713951214" crossorigin="anonymous"></script>
<script data-minify="1" src="https://blog.leslignesbougent.org/wp-content/cache/min/1/jquery-3.6.1.min.js?ver=1713951214"></script>
<style type="text/css">
#box-info{
background-color: rgb(242, 242, 242);
border-radius: 7px;
width: 300px;
padding: 12px ;
}
#title{
letter-spacing: -.04em;
font-weight: 700;
font-style: normal;
font-family: Fira Sans,Sans-serif;
color: #4a4a4a;
margin: 0;
padding: 7px 0;
font-size: 24px;
line-height: 49px;
}
.result{
color: #b50000;
}
#sub_title{
color: #4a4a4a;
font-size: 20px;
margin-top: 5px;
line-height: 30px;
}
.progress{
width: 100%;
height: 10px;
margin-bottom: 5px;
overflow: hidden;
background-color: #FFF;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
}
.progress-bar{
background-color: #b50000;
}
#nb-text{
font-size: 0.8em;
}
#btn_url{
width: 100%;
background-color: #b50000;
color: #FFF;
-webkit-box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
}
@media screen and (max-width:600px) {
#box-info{
width:90% ;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div id="box-info">
<h2 id="title"></h2>
<h3 id="sub_title">Déjà <span class="result"></span> signatures</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-label="Basic example"style="width:0" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div id="nb-text"><p><span id="nb_dif"> </span> nécecessaire pour atteindre <span id="sign_max"> </span></p>
</div>
<a id="btn_url" href="#" class="btn" role="button" target="_blank" >Je signe la pétition</a>
</div>
<script>
//-------variable à modifier ------------
var url = "ecologie-pour-supprimer-les-capsules-nos-douanes-doivent-abandonner-leur-marianne-depassee-9703";
var titre = "je suis le titre de la pétition"
var nb_signature_max = 100000;
//---------------------------------------
var singature_actuel ;
var result;
var diff_sign;
bar = $(".progress-bar");
$.get( "https://curiosity.leslignesbougent.org/list?petitionCode="+url+"&affiliateId=5", function( data ) {
singature_actuel = $.parseJSON(data.body).sizeList;
diff_sign = nb_signature_max-singature_actuel;
result = 100*singature_actuel/nb_signature_max;
$(".result").html(singature_actuel = new Intl.NumberFormat('de-CH').format(singature_actuel));
textResult = new Intl.NumberFormat('de-CH').format(result);
if(diff_sign<0){
diff_sign = 0;
}
diff_sign = new Intl.NumberFormat('de-CH').format(diff_sign);
console.log(diff_sign);
makeProgress(result);
$("#title").html(titre);
$("#nb_dif").html(diff_sign);
$("#sign_max").html( nb_signature_max = new Intl.NumberFormat('de-CH').format(nb_signature_max));
$("#btn_url").attr("href","https://www.leslignesbougent.org/petitions/"+url)
});
function makeProgress(i){
pourcent = i;
bar.innerWidth(pourcent+"%");
}
</script>
</body>
</html>