Cómo crear Tours interactivos con Driver.js

¿Qué es Driver.js?

Driver.js es una librería de código abierto que permite crear tours interactivos en tu sitio web, resaltando elementos y proporcionando descripciones visuales para ayudar a tus usuarios a entender cómo funciona la interfaz. Es ideal para onboarding, demos o simplemente para explicar nuevas características.

Características de Driver.js

   ✅ Ligera y sin dependencias externas.

   ✅ API sencilla e intuitiva.

   ✅ Personalizable: colores, posiciones, estilos, etc.

   ✅ Funciona perfectamente con sitios Drupal.

Instalación

Puedes incluir Driver.js fácilmente en tu proyecto Drupal de dos formas:

Opción 1: Desde un CDN

Agrega los siguientes enlaces en tu archivo de librería de Drupal (.libraries.yml) o directamente en tu plantilla twig si estás en desarrollo:

<link rel="stylesheet" href="https://unpkg.com/driver.js@latest/dist/driver.min.css">
<script src="https://unpkg.com/driver.js@latest/dist/driver.min.js"></script>

Opción 2: Usando npm

npm install driver.js

Ejemplo de uso

Una vez cargada la librería, crear un tour es tan simple como esto:

const driver = new Driver();
driver.defineSteps([
 {
   element: '#menu-principal',
   popover: {
     title: 'Menú principal',
     description: 'Aquí encuentras todas las secciones del sitio',
     position: 'bottom'
   }
 },
 {
   element: '#formulario-contacto',
   popover: {
     title: 'Formulario de contacto',
     description: 'Puedes escribirnos desde aquí',
     position: 'top'
   }
 }
]);
driver.start();