Implementa Driver.js para Crear Tours Interactivos en tu Web

Driver.js es una poderosa librería JavaScript que facilita la creación de tours interactivos, permitiendo resaltar elementos clave de una página web para ofrecer a los usuarios una guía paso a paso clara y efectiva.

Con una implementación sencilla y flexible, Driver.js permite destacar características clave de tu sitio o aplicación mediante ventanas emergentes (popups) completamente personalizables.

Esta herramienta es ligera, altamente configurable, y compatible con múltiples idiomas, lo que la convierte en una solución eficaz para mejorar la experiencia del usuario y proporcionar tutoriales interactivos sin interrumpir la navegación.

Contenidos ocultar

Instalación de Driver.js

Instalación con NPM

Instalación con CDN

Configuración de Driver.js

Cómo crear un tour básico

Personalización de la interfaz

Ejemplo de configuración avanzada

Soporte de Idiomas en Driver.js

Traducción y Personalización de Textos

Configuración de la posición del popover

Ejemplo práctico

Instalación de Driver.js

Puedes instalar Driver.js en tus proyectos mediante gestores de paquetes o usando un CDN

Instalación con NPM

Para instalar Driver.js mediante NPM, usa el siguiente comando en tu terminal o consola de comandos:

npm install driver.js

Instalación con CDN

Si prefieres usar un CDN (Content Delivery Network) para integrar Driver.js sin necesidad de instalación previa, puedes incluir las siguientes líneas en tu archivo HTML para cargar tanto los archivos CSS como JavaScript necesarios:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" />
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>

Una vez instalado, puedes comenzar a usar Driver.js rápidamente. Si lo instalaste como paquete npm, importa el objeto Driver en tu script JavaScript:

import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "Title",
    description: "Description"
  }
});

Si usaste el CDN, accede al objeto Driver desde la ventana global:

const driver = window.driver.js.driver;
const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "Title",
    description: "Description"
  }
});

Configuración de Driver.js

Cómo crear un tour básico

Para iniciar un tour con Driver.js, solo necesitas definir los pasos que deseas resaltar en tu página. Cada paso puede incluir un título, una descripción, y una opción de alineación para el popover (ventana emergente).

Aquí tienes un ejemplo básico de cómo configurar un tour:

const driver = new Driver();
driver.defineSteps([
    {
        element: '#button1',
        popover: {
            title: 'Primer Paso',
            description: 'Haz clic aquí para comenzar el tour.'
        }
    },
    {
        element: '#button2',
        popover: {
            title: 'Segundo Paso',
            description: 'Haz clic aquí para continuar.'
        }
    }
]);
driver.start();

Personalización de la interfaz

Driver.js permite personalizar varios aspectos de la interfaz, tales como:

Idioma: Puedes definir el idioma del tour mediante la opción language. Si no se especifica un idioma, Driver.js utiliza el inglés de manera predeterminada.
Botones personalizados: Es posible modificar los textos de los botones del tour, como «Siguiente», «Anterior» y «Hecho», usando las opciones nextBtnText, prevBtnText y doneBtnText. Esto permite una experiencia más adecuada al contexto o idioma del usuario.
Posicionamiento del Popover: Los popovers pueden configurarse para aparecer en diferentes lados de los elementos resaltados (side) y alinearse según sea necesario (align). Por ejemplo:
- side: Define si el popover estará arriba, abajo, a la izquierda o a la derecha del elemento.
- align: Alinea el popover al inicio, centro o final del elemento.

Ejemplo de configuración avanzada

const driver = new Driver({
    language: 'es',  // Cambiar idioma a español
    doneBtnText: '¡Hecho!',  // Texto personalizado para el botón "Hecho"
    steps: [
        {
            element: '#start-tour',
            popover: {
                title: 'Iniciar Tour',
                description: 'Haz clic aquí para comenzar el recorrido.',
                side: 'top',
                align: 'center'
            }
        },
        {
            element: '#feature-1',
            popover: {
                title: 'Primera Característica',
                description: 'Este es el primer paso donde aprenderás la primera característica.',
                side: 'right',
                align: 'start'
            }
        }
    ]
});
driver.start();

Soporte de Idiomas en Driver.js

Podemos configurar el idioma del tour para que los textos de los popovers y botones se adapten al público objetivo. La configuración del idioma se realiza mediante la opción language, especificando un código de idioma como 'en' (inglés) o 'es' (español).

Idiomas Compatibles
Driver.js soporta varios idiomas, incluidos:

en: Inglés (predeterminado)
es: Español
fr: Francés
de: Alemán
pt: Portugués
it: Italiano
ja: Japonés

Si no se especifica un idioma o el idioma configurado no está soportado, el tour se mostrará en inglés por defecto. Para establecer el idioma, usa la opción language al inicializar Driver.js:

const driver = new Driver({
    language: 'fr',  // Cambia el idioma a francés
    steps: [
        {
            element: '#feature-2',
            popover: {
                title: 'Deuxième Caractéristique',
                description: 'Découvrez la deuxième fonctionnalité ici.',
                side: 'left',
                align: 'center'
            }
        }
    ]
});
driver.start();

Con esta configuración, todo el contenido del tour, incluidos los mensajes del sistema, se mostrará en el idioma seleccionado.

Traducción y Personalización de Textos

La librería también ofrece la posibilidad de personalizar los textos de los botones y las descripciones de los popovers. Esto resulta especialmente útil para garantizar una experiencia completamente localizada en el idioma del usuario.

Ejemplo de configuración personalizada de botones y textos:

const driverObj = driver({
    language: 'es', // Configuración en español
    showProgress: true,
    nextBtnText: 'Siguiente', // Texto del botón "Siguiente"
    prevBtnText: 'Anterior', // Texto del botón "Anterior"
    doneBtnText: 'Hecho', // Texto del botón "Hecho"
    steps: [
        {
            element: '.list-item[title="Vista inicial"]',
            popover: {
                title: 'Vista inicial',
                description: 'Haz clic aquí para ir a la vista inicial del mapa.',
            }
        },
        // Otros pasos
    ]
});
driverObj.drive();

Configuración de la posición del popover

Driver.js también permite configurar la posición del popover en relación con el elemento resaltado. Las opciones side y align controlan el lado y la alineación del popover. Puedes elegir entre las siguientes opciones:

side: 'top', 'bottom', 'left', 'right'
align: 'start', 'center', 'end'

Ejemplo práctico

Para que puedas comprobar lo sencillo que es trabajar con Driver.js y el gran potencial que ofrece esta poderosa librería para crear guías interactivas en tu aplicación web, te dejamos un ejemplo completo en JSFiddle. Desde ahí podrás experimentar y personalizar el código directamente en tu navegador, probando diferentes configuraciones, modificando los pasos del tour y adaptándolo a tus necesidades, todo sin necesidad de configurar nada en tu propio entorno.

Solo tienes que acceder al enlace, hacer ajustes y ver el resultado instantáneamente.

Explora los ejemplos que hemos compartido, experimenta con las configuraciones y visita los recursos oficiales para aprovechar todo el potencial de Driver.js. ¡Empieza a guiar a tus usuarios de forma interactiva y efectiva desde hoy mismo!

Recursos Adicionales: