Guidez vos utilisateurs à travers une visite demo avec Sheperd

Guider vos utilisateurs lors d’une première visite peut s’avérer bénéfiques. Il existe alors de nombreuses solutions pour réaliser cela, vidéos, tutoriels, guides, ou les visites guidées. Découvrez Shepherd, une librairie JavaScript qui va vous permettre de créer ce genre de visites.

Shepherd est une librairie JavaScript qui va vous permettre de guider vos utilisateurs à travers votre application. Elle utilise Tether, une autre librairie Javascript open-source permettant le positionnement d’éléments, pour placer toutes les étapes de la visite. Cette dernière va s’assurer que vos tooltips n’apparaîtront pas en dehors de l’écran ou qu’ils ne seront pas écrasés par un overflow mal réglé.

 

shepperd

Pour l’utiliser, c’est très simple. Commencez par ajouter la librairie à votre application :

<link rel="stylesheet" href="shepherd-theme-arrows.css" />
<script src="shepherd.min.js"></script>

Puis créez votre visite en y ajoutant autant d’étapes que vous le souhaitez :

tour = new Shepherd.Tour
  defaults:
    classes: 'shepherd-theme-arrows'

tour.addStep 'example',
  title: 'Example Shepherd'
  text: 'Creating a Shepherd is easy too! Just create ...'
  attachTo: '.hero-example bottom'
  advanceOn: '.docs-link click'

tour.start()

Et le tour est joué !

Pour plus d’informations :

Mat_

Au départ on sort avec un diplôme d’ingénieur de l’ESIL (devenu Polytech’Marseille) en Informatique, réseau et multimédia, spécialisé dans les Systèmes d’Informations et Services E-Business.
En même temps on bosse, on développe, on apprend. Et maintenant on entreprend.

Passionné de nouvelles technologies, et évangéliste de WordPress, j’aime découvrir, tester, rechercher.

Vous aimerez aussi...

Suivez Kune.fr sur les réseaux sociaux !

Kune.fr est votre site de ressources web. Vous y trouverez de nombreux outils utiles pour le web.
Alors n'hésitez plus, aimez notre page !

  • Ressources Wordpress, tutoriels, plugins et thèmes
  • Ressources design, packs d'icônes, kits UI ...
Fermer cette popup
%d blogueurs aiment cette page :