Driver.js (CZ článek)

Knihovna driver.jsnabízí jednoduchý způsob, jak v prohlížeči zvýraznit konkrétní prvky a vytvořit tak interaktivní nápovědu, onboarding nebo krokové tutoriály. Pomocí překrytí, popisků a krokového vedení můžeš uživatelům usnadnit orientaci v nové aplikaci nebo funkcionalitě. Umožňuje provádět uživatele produktem, zvýšit adopci funkcí a odpovídat na časté otázky přímo v rozhraní.

Zde jsou odkazy na webovou stránku a na dokumentaci

Výhody knihovny

• Vysoce konfigurovatelná – snadno přizpůsobitelná vzhledem i chováním
• Funkčně bohatá – podpora kroků, přeskakování, vlastních callbacků
• Snadno použitelná – intuitivní API
• Accessible – podporuje klávesové zkratky a navigaci
• Podpora mobilních zařízení
• Je to drobek – malá velikost balíčku, vhodná i pro mobilní weby
• Typescript
• Bez závislostí
• MIT licence
• Připravená pro frameworky – lze použít s Reactem, Vue, Angular

Scénáře použití

• Onboarding uživatelů – vysvětli, jak začít používat produkt, krok za krokem
• Kontextová nápověda – ukaž, co prvek dělá přímo na místě, kde ho uživatel potřebuje
• Adopce nových funkcí – zvýrazni nové prvky a informuj uživatele o jejich významu

Příklady použití v kódu

Driver.js lze použít přes CDN nebo nainstalovat přes npm:

npm install driver.js📋

// simple-highlight.ts

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

const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: 'Toto je tlačítko',
    description: 'Klikni sem pro odeslání formuláře',
  }
});📋

// product-tour.ts
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    { element: '#menu', popover: { title: 'Hlavní nabídka', description: 'Zde najdeš navigaci aplikace', } },
    { element: '#search', popover: { title: 'Vyhledávání', description: 'Hledej data podle názvu nebo ID',} },
    { element: '#submit', popover: { title:  'Odeslání', description: 'Dokonči akci kliknutím na tlačítko', } },
  ]
});

driverObj.drive();📋

Dále se podívej na rozsáhlé možnosti konfigurace zde

Omezení

• Využití závisí na stabilní struktuře DOM — dynamicky generované nebo pozdě připojené prvky je potřeba ošetřit
• Vyžaduje správně načtené CSS (driver.css) pro funkční stylování

Závěr

driver.js je praktický nástroj pro tvorbu interaktivních průvodců, který pomáhá uživatelům lépe porozumět aplikaci. Díky své jednoduchosti, malé velikosti a podpoře TypeScriptu se hodí pro moderní frontendové projekty i jednoduché webové aplikace.