Intégrer un Popin sur votre site Drupal

Pop in : qu’est ce que c’est ?

Un popin s’affiche au-dessus de la page et l'utilisateur ne peut pas interagir avec la page web tant qu’il n’a pas fermé le popin.  L'objectif est de capter l’attention de l'utilisateur et l’inciter à l’action. Le popin est différent du popup qui est une nouvelle fenêtre ouverte par le navigateur. Le popin est intégré dans la même page web.

Si on s'intéresse à l’expérience utilisateur (UX Design), cette technique n’est pas recommandée car elle n’est pas intégrée dans la logique de la navigation. Ouvrir un popup ou une modal après avoir cliqué sur un bouton semble logique. Un popin ou popup qui s’ouvre sans avoir rien demandé est à l’inverse un événement intempestif qui provoque un changement de contexte de navigation et qui désoriente l'utilisateur. Il pose également des problèmes d'accessibilité. 

Il existe quelques cas où je pense que cela fonctionne. J’en ai intégré un sur le site d’une association pour faire la promotion d’un cours gratuit découverte. De cette manière, on est sûr que tous les visiteurs du site verront l’information. Le contenu peut légitimement intéresser les visiteurs et la durée du popin est de 15 jours.

exemple de popin

Créer le Popin avec un module Drupal

Pour réaliser ce popin, j’ai utilisé un module très complet développé par Kgaut, un développeur Drupal très connu de la communauté drupal france.

Le module permet de 

• Définir le nombre de jours entre 2 apparitions du popin (basé sur un cookie)
• Définir une date de début et de fin d’affichage : pratique, pas besoin de penser à le désactiver quand l'événement est passé. 
• Choisir une image et saisir un titre, un sous titre et un texte de description
• Un Bouton (Call to action ou CTA) avec un texte pour le lien et une url

La configuration se fait ici : /admin/content/popin

Ensuite, on intègre ce popin avec un bloc Drupal sur la page de mise en page des blocs : /admin/structure/block

Si vous avez besoin d’afficher un popup sur votre site, je vous recommande ce module qui possède toutes les options utiles.

Configuration dans le BO

capture configuration module Drupal popin

Résultat

Voilà un exemple concret de popin affiché avec le module popin.