# Savings badge events

> The DOM events the AndOr savings badge fires, with their detail fields and an example listener, plus its data attributes and states.

Source: https://backtrackhq.com/docs/widgets/savings-badge/events/

All are bubbling `CustomEvent`s with `widgetType: "badge"`. Listen on
`document`. For every widget's events, see
[Events](https://backtrackhq.com/docs/developers/events/).

| Event | When | Detail |
| --- | --- | --- |
| `andor:widget:mount` | The badge is first seen | `widgetType`, `widgetId`, `productId` |
| `andor:widget:unmount` | The badge left the page. Also fires on `document`. | Same as mount |
| `andor:display:change` | The badge's state changed | Mount fields, plus `previous` and `current` |

`previous` and `current` hold `discountId`, `kind`, `mode`, `visible`
and `endsAt`. No event fires on first paint, and a change can arrive up
to one second late.

## Examples

```js
document.addEventListener("andor:display:change", (event) => {
  const { widgetType, current, previous } = event.detail.resource;
  if (widgetType === "badge" && previous?.visible && !current.visible) {
    console.log("this deal just ended:", previous.discountId);
  }
});
```

## Data attributes and states

| Attribute or class | On | Meaning |
|---|---|---|
| `.andor-badge--applied` | host | the code is already applied |
| `.andor-code--applied` | chip | the same, on the code chip |
| `hidden` | host | no deal for this variant now |

For the attributes every widget shares, like `data-andor-state` and
`data-andor-progress`, see
[Data attributes and states](https://backtrackhq.com/docs/developers/data-attributes/).