Se você já se perguntou como aquelas aplicações modernas conseguem guiar novos usuários pela interface, destacando botões, exibindo dicas e explicando funcionalidades passo a passo, a resposta muitas vezes é uma biblioteca de tours interativos. E entre as opções disponíveis no ecossistema JavaScript, a Driver.js se destaca pela leveza, simplicidade e poder de customização.

Neste post, vamos explorar o que é a Driver.js, por que ela é uma excelente escolha para criar experiências de onboarding e como começar a usá-la no seu projeto.

O que é a Driver.js?

A Driver.js é uma biblioteca JavaScript leve, sem dependências externas, desenvolvida para criar tours guiados, destaques visuais e ajuda contextual dentro de aplicações web. Escrita em TypeScript e licenciada sob MIT, ela funciona em todos os principais navegadores e também em dispositivos móveis.

Com mais de 25 mil estrelas no GitHub e milhões de downloads, ela já é utilizada por milhares de empresas ao redor do mundo. O grande diferencial é que, mesmo sendo extremamente simples de configurar, ela oferece uma API rica que permite atender desde casos básicos até fluxos bastante complexos.

Principais características

Antes de mergulhar no código, vale conhecer alguns pontos fortes que tornam a Driver.js uma opção atraente. Ela é leve e não adiciona dependências ao seu projeto, suporta todos os principais navegadores, funciona muito bem em dispositivos móveis, é totalmente customizável via API e CSS, possui hooks para praticamente todos os eventos do tour, oferece acessibilidade nativa e está pronta para uso com qualquer framework moderno, seja React, Vue, Angular ou JavaScript puro.

Instalação

A instalação da Driver.js é bastante direta. Você pode usar o gerenciador de pacotes da sua preferência, como npm, pnpm ou yarn:

npm install driver.js
pnpm install driver.js
yarn add driver.js

Caso prefira não utilizar um bundler, também é possível incluí-la via CDN diretamente no HTML, importando o script e o CSS oficiais. Essa opção é útil para protótipos rápidos, páginas estáticas ou quando você quer testar a biblioteca sem configurar um projeto completo.

Destacando um elemento da página

O caso de uso mais simples é destacar um único elemento da página e exibir uma caixa de informação (popover) ao lado dele. Com poucas linhas de código você já consegue chamar a atenção do usuário para algo importante:

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver();

driverObj.highlight({
  element: "#meu-elemento",
  popover: {
    title: "Bem-vindo!",
    description: "Este é um destaque criado com Driver.js"
  }
});

Aqui, o método highlight recebe um seletor CSS do elemento que você quer destacar e um objeto popover com título e descrição. A biblioteca cuida do overlay escuro ao redor, do posicionamento automático do popover e até do fechamento ao clicar fora.

Criando um tour com múltiplos passos

Para um onboarding completo, normalmente queremos guiar o usuário por vários elementos em sequência. Para isso, basta configurar o array de steps e chamar o método drive:

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    { element: '.page-header', popover: { title: 'Cabeçalho', description: 'Aqui fica o cabeçalho da página' } },
    { element: '.top-nav',     popover: { title: 'Menu',      description: 'Use o menu para navegar' } },
    { element: '.sidebar',     popover: { title: 'Sidebar',   description: 'Acesso rápido às suas seções' } },
    { element: '.footer',      popover: { title: 'Rodapé',    description: 'Links úteis e informações legais' } }
  ]
});

driverObj.drive();

Cada item do array steps representa um passo do tour. A opção showProgress habilita um contador (por exemplo, “1 de 4”) para que o usuário saiba em que ponto da jornada está. Ao chamar drive, a Driver.js cuida da navegação entre passos, exibindo botões de avançar, voltar e fechar automaticamente.

Onde colocar o ID no HTML

Para que a Driver.js consiga localizar o elemento que você quer destacar, ela precisa de um seletor CSS válido. No exemplo do highlight usamos #meu-elemento, que aponta para um elemento HTML com o atributo id="meu-elemento". O cerquilha (#) representa um id na sintaxe de seletores CSS, da mesma forma que o ponto (.) representa uma classe.

Na prática, basta adicionar o atributo id em qualquer tag HTML que você queira destacar. Veja um exemplo completo de página com HTML, CSS e JS funcionando em conjunto:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Exemplo Driver.js</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.css"/>
</head>
<body>

  <!-- O id="meu-elemento" é o que a Driver.js vai procurar -->
  <button id="meu-elemento">Clique aqui</button>

  <script src="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.js.iife.js"></script>
  <script>
    const driver = window.driver.js.driver;
    const driverObj = driver();

    driverObj.highlight({
      element: "#meu-elemento",
      popover: {
        title: "Bem-vindo!",
        description: "Este botão tem id='meu-elemento'"
      }
    });
  </script>

</body>
</html>

Repare em três pontos importantes: o atributo id="meu-elemento" no botão, o seletor "#meu-elemento" dentro do highlight apontando para esse id, e a inclusão do CSS e do JS da Driver.js via CDN no <head> e antes do fechamento do <body>.

Se preferir usar uma classe em vez de id (útil quando o mesmo estilo se repete em vários elementos), basta trocar o seletor: <div class="minha-classe"> no HTML e element: ".minha-classe" no JavaScript. A Driver.js aceita qualquer seletor CSS válido, então você também pode usar coisas como "nav a:first-child" ou "[data-tour=\"step1\"]".

Quando usar a Driver.js?

A documentação oficial destaca quatro grandes cenários em que a biblioteca brilha. O primeiro é o onboarding de novos usuários, explicando como o produto funciona logo no primeiro acesso. O segundo é a remoção de distrações, em que o overlay escurece o resto da tela e foca a atenção em um único elemento. O terceiro é a ajuda contextual, oferecendo explicações sob demanda sem precisar tirar o usuário da página. E o quarto é a adoção de novas funcionalidades, mostrando recursos recém-lançados para que eles não passem despercebidos.

Indo além do básico

Além do uso simples, a Driver.js oferece recursos avançados como tours assíncronos (úteis quando o próximo passo depende de algo carregado dinamicamente), confirmação ao sair do tour, customização de cores e estilos do overlay, controle fino do posicionamento dos popovers, hooks para eventos como onHighlightStarted, onDeselected e onDestroyed, além da possibilidade de impedir que o usuário feche o tour antes de concluir certas etapas. Tudo isso está detalhado nos exemplos e na referência de API da documentação oficial.

Conclusão

A Driver.js é uma daquelas bibliotecas que resolvem um problema específico de forma elegante: melhorar a experiência do usuário dentro do seu produto. Em poucos minutos você consegue subir um tour funcional, e à medida que o projeto evolui, a API rica permite ir adicionando complexidade sem precisar trocar de ferramenta.

Se você está construindo um SaaS, um dashboard interno, uma plataforma educacional ou qualquer aplicação com uma curva de aprendizado, vale muito a pena experimentar. A documentação completa, com exemplos interativos, está disponível em driverjs.com e o código-fonte pode ser encontrado no repositório oficial no GitHub.

Publicado por Camilla Carvalho

• GitHub
• LinkedIn