Tutoriais animados com Javascript

Driver.js é uma ferramenta open source para tutoriais animados super simples e flexível para seus projetos javascript. Possui 20 mil estrelas no github!

Vantagens de ter um tutorial animado em sua aplicação:

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/driver.js@1.0.1/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/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"
  }
});

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: