Vous cherchez à fidéliser vos nouveaux visiteurs lorsqu'ils arrivent en bas de page de votre site lors de leur première visite ? Voici en quelques lignes de code comment fabriquer un Pop-In intelligent qui vous permettra de transformer vos nouveaux visiteurs en lecteurs et évitera de les perdre définitivement.
La première étape consiste à construire le Pop-In grâce aux "modal box" proposées par la librairie Bootstrap. Placez le code source suivant de préférence en bas de vos pages Web et complétez le contenu du corps de la Pop-In avec les liens vers votre flux RSS et vos réseaux sociaux.


<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="subscribeModal" id="subscribeModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title text-center">Rejoignez ma communautC)</h3>
      </div>
      <div class="modal-body">

	 <div class="row">

	    <!-- Placez ici les liens vers votre flux RSS ou vos pages sociales -->

        </div>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

La seconde étape consiste à déclencher l'affichage de la Pop-In lorsque les nouveaux visiteurs arriveront pour la première fois en bas d'une des pages Web de votre site Internet.
Pour cela, nous allons détecter les actions de scroll sur le navigateur pour identifier le moment où la personne est arrivée en bas d'une page Web.


  $(window).on("scroll", function() {

	var scrollHeight = $(document).height();
	var scrollPosition = $(window).height() + $(window).scrollTop();

        // Si nous sommes en bas de la page Web
	if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
	
           // Si le visiteur n'a pas encore de cookie
	   if ($.cookie('modal_shown') == null){

               // On positionne un cookie valable 365 jours
	       $.cookie('modal_shown', 'yes', { expires: 365, path: '/' });

               // On affiche la Pop-In
               $('#subscribeModal').modal({
                        show: true
               });
	   }
	}
    });

Nous positionnons un cookie d'une durée de 1 an qui permettra aux visiteurs réguliers de ne pas être pollués par le Pop-In.
Pour pouvoir faire fonctionner la fonction $.cookie, vous devrez préalablement avoir chargé le module JQuery Cookie dans votre page.

Vous voilà un expert des Pop-In sociales, à vous de jouer !