Announce a Feature

Use this to tell existing users about something new without a full tour. Show it once and remember that they’ve seen it.

Highlight It Once

Load the page below, close the popover, then load it again.

const SEEN_KEY = "seen-pdf-export";

if (!localStorage.getItem(SEEN_KEY)) {
  const driverObj = driver({
    onDestroyed: () => localStorage.setItem(SEEN_KEY, "1"),
  });

  driverObj.highlight({
    element: "#export-pdf",
    popover: {
      title: "New: export to PDF",
      description: "Download any report as a PDF.",
      showButtons: ["close"],
    },
  });
}

The page is dimmed until the user closes the popover. The highlighted button still works, so they can try it right away.

Or Leave a Hint

A hint doesn’t interrupt. The beacon pulses on the new feature until the user dismisses it with Got it, and onDismiss keeps it dismissed. Load the page, dismiss a hint, then load it again.

Add the next feature to newFeatures with its own id, and only users who haven’t seen it get a beacon.

Uses: highlight(), onDestroyed, hints