> ## Documentation Index
> Fetch the complete documentation index at: https://discountkit.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Events

> The lifecycle events <dkl-discount-badge> emits

`<dkl-discount-badge>` is otherwise standalone — it has no discount or state event of its own
(it reads the product's max-reward metafields server-side and re-renders on variant change).
What it does emit are **lifecycle** events as its behaviour attaches and tears down.

## Emits

Each badge instance emits **mount** and **unmount** events — handy for wiring up (and cleaning
up) custom integrations per instance. Both **bubble** and carry a `DklWidgetEventDetail`
resource.

<ParamField body="discount-kit-live:widget:mount" type="CustomEvent">
  Fired once the controller has attached its behaviour to the (already server-rendered)
  element. `resource`: `{ widgetType, widgetId, productId? }` — `productId` is included when
  known.
</ParamField>

<ParamField body="discount-kit-live:widget:unmount" type="CustomEvent">
  Fired when the instance tears down — e.g. the element is removed, or the theme editor
  re-renders the section. Same `resource` shape. Use it to detach any listeners or observers
  you set up on mount.
</ParamField>

```js theme={null}
// event.detail.resource on widget:mount / widget:unmount
{
  widgetType: 'discount-badge',
  widgetId: null,
  productId: 7820000000001
}
```

<Tip>
  To react to the badge's **text** changing (e.g. on a variant change), there's no event —
  observe the element with a `MutationObserver` instead. See
  [Reacting to changes](/components/discount-badge/web-component#reacting-to-changes).
</Tip>

## Next steps

<CardGroup cols={2}>
  <Card title="Web Components" icon="code" href="/components/discount-badge/web-component">
    Drop-in usage and the `MutationObserver` example.
  </Card>

  <Card title="Discount Badge overview" icon="circle-info" href="/components/discount-badge/overview">
    What the component does and how it reads the discount.
  </Card>
</CardGroup>