Driver.js na prática: facilitando a experiência do usuário 💛🚕

O que é o Driver.js? O Driver.js é uma biblioteca JavaScript de código aberto, sem dependências (vanilla JS), projetada para direcionar o foco do usuário em uma página web. Ela cria uma camada de sobreposição (overlay) que destaca um elemento específico, escurecendo o restante da tela. Vantagens Usuários integradosIntegre seus…

O que é o Driver.js?

O Driver.js é uma biblioteca JavaScript de código aberto, sem dependências (vanilla JS), projetada para direcionar o foco do usuário em uma página web. Ela cria uma camada de sobreposição (overlay) que destaca um elemento específico, escurecendo o restante da tela.

Vantagens

Usuários integrados
Integre seus usuários explicando como usar seu produto e respondendo a perguntas comuns.

Remova distrações
Com o recurso de destaque, você pode remover distrações e focar a atenção dos usuários no que é importante.

Ajuda contextual
Forneça ajuda contextual para seus usuários, explique como usar seu produto e responda perguntas comuns.

Adoção de recursos
Destaque novos recursos, explique como usá-los e certifique-se de que seus usuários não os percam.

Instalação

A instalação é feita de maneira super simples, pode ser usado via instalação gerenciadores de pacotes:

# Using npm
npm install driver.js

# Using pnpm
pnpm install driver.js

# Using yarn
yarn add driver.js

Alternativamente, você pode usar CDN e incluir o script em seu arquivo HTML:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.css"/>

Comece a usar

Depois de instalado, você pode importar o pacote para o seu projeto. O exemplo a seguir mostra como destacar um elemento:

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

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

Nota sobre CDN

Se você estiver usando o CDN, terá que usar o pacote do windowobjeto:

const driver = window.driver.js.driver;

const driverObj = driver();

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

Estruturando o HTML

No seu arquivo HTML, você precisa definir os elementos que deseja destacar usando atributos id. Além disso, é fundamental chamar o seu script de lógica. Se você estiver usando import diretamente no navegador, lembre-se de usar type="module".

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Minha Aplicação com Driver.js</title>
</head>
<body>

  <div id="some-element">
    <h1>Olá, este é o elemento alvo!</h1>
    <p>O Driver.js vai focar a atenção do usuário aqui.</p>
  </div>

  <script type="module" src="app.js"></script>
</body>
</html>

A documentação do Driver.js é muito completa e possui muitos exemplos animados, como por exemplo o de tutoriais animados com estilização do popover:

Referências: Documentação: https://driverjs.com/

Cancelar resposta