# Announce a Feature

> Point out a new feature once with a Driver.js highlight, or leave a hint beacon on it that stays dismissed after the user has seen it.

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.

```js
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.

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

const KEY = "dismissed-hints";
const dismissed = JSON.parse(localStorage.getItem(KEY) ?? "[]");

const newFeatures = [
  {
    id: "export-pdf",
    element: "#export-pdf",
    popover: {
      title: "New: export to PDF",
      description: "Download any report as a PDF.",
    },
  },
];

const productHints = hints({
  hints: newFeatures.filter(h => !dismissed.includes(h.id)),
  onDismiss: (element, hint) => {
    dismissed.push(hint.id);
    localStorage.setItem(KEY, JSON.stringify(dismissed));
  },
});

productHints.show();
```

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

**Uses**: [`highlight()`](https://driverjs.com/docs/simple-highlight.md), [`onDestroyed`](https://driverjs.com/docs/configuration.md#hooks), [hints](https://driverjs.com/docs/hints.md#remembering-dismissals)