Intégrez votre compteur de pétition sur votre site/blog

Déjà signatures

nécecessaire pour atteindre

Je signe la pétition

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=1667987677" crossorigin="anonymous"></script>
<script data-minify="1" src="https://blog.leslignesbougent.org/wp-content/cache/min/1/jquery-3.6.1.min.js?ver=1667987677"></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>
<noscript><link rel="stylesheet" href="https://blog.leslignesbougent.org/wp-content/cache/min/1/6c1fc810d1d4372a4a0d6ec2b7c817ef.css" media="all" data-minify="1" /><link rel='stylesheet' id='elementor-post-3626-css' href='https://blog.leslignesbougent.org/wp-content/uploads/elementor/css/post-3626.css?ver=1668524200' type='text/css' media='all' /><link rel='stylesheet' id='elementor-global-css' href='https://blog.leslignesbougent.org/wp-content/uploads/elementor/css/global.css?ver=1668524214' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-6417-css' href='https://blog.leslignesbougent.org/wp-content/uploads/elementor/css/post-6417.css?ver=1668525295' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-27-css' href='https://blog.leslignesbougent.org/wp-content/uploads/elementor/css/post-27.css?ver=1668524201' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-48-css' href='https://blog.leslignesbougent.org/wp-content/uploads/elementor/css/post-48.css?ver=1668524201' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-3727-css' href='https://blog.leslignesbougent.org/wp-content/uploads/elementor/css/post-3727.css?ver=1667567940' type='text/css' media='all' /></noscript></body>
</html>