---

title: DisplayEmitter

---

# DisplayEmitter

A component that emits a display event when it first appears in the viewport.

## Props

| Name                       | Description                             | Type                                                                    | Default       |
| -------------------------- | --------------------------------------- | ----------------------------------------------------------------------- | ------------- |
| <code>payload</code>       | The payload for the display event emit. | <code>TaggingRequest</code>                                             | <code></code> |
| <code>eventMetadata</code> | Optional event metadata.                | <code>Omit<WireMetadata, 'moduleName' \| 'origin' \| 'location'></code> | <code></code> |

## Events

This component emits the following events:

- [`TrackableElementDisplayed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-modules/tagging/events.types.ts)

## See it in action

In this example, the `DisplayEmitter` component will emit the `TrackableElementDisplayed` event when
the div inside first appears in the viewport.

```vue
<template>
  <DisplayEmitter :payload="{ url: 'tagging/url', params: {} }">
    <div>I'm displaying</div>
  </DisplayEmitter>
</template>

<script setup>
import { DisplayEmitter } from "@empathyco/x-components";
</script>
```