> For the complete documentation index, see [llms.txt](https://help.recart.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.recart.com/developers/client-side-sdk/listening-to-recart-opt-in-tool-events.md).

# Listening to Recart Opt-in Tool Events

If you're integrating Recart with other tools or analytics platforms, you may want to listen to events emitted by Recart's Opt-in Tool. These events help you track user interactions and capture contact information in real-time.

Recart emits **three types of custom events** via the browser’s `window` object. You can listen to these using JavaScript’s `window.addEventListener()` method.

***

## 🔔 Available Events and Payloads

### 1. `recart:optin-tool:interaction`

Emitted when a visitor interacts with a popup in any way — including viewing, clicking, or closing it.

**Payload Schema:**

```ts
interface OptinToolInteractionPayload {
  optinToolId: string
  optinToolName: string
  optinToolExperimentId?: string
  optinToolExperimentName?: string
  interaction: string
}
```

**Possible `interaction` values:**

* `impression` – popup was shown
* `emailClick` – visitor clicked the email CTA
* `smsClick` – visitor clicked the SMS CTA
* `minimizedImpression` – popup was shown in minimized view
* `closePopup` – visitor closed the popup (switches to minimized view)
* `closeMinimized` – visitor closed the minimized popup

***

### 2. `recart:optin-tool:email-captured`

Emitted when a visitor submits their **email address** through the popup.

**Payload Schema:**

```ts
interface EmailCapturedPayload {
  optinToolId: string
  optinToolName: string
  optinToolExperimentId?: string
  optinToolExperimentName?: string
  email: string
}
```

***

### 3. `recart:optin-tool:phone-number-captured`

Emitted when a visitor submits their **phone number** through the popup.

**Payload Schema:**

```ts
interface PhoneNumberCapturedPayload {
  optinToolId: string
  optinToolName: string
  optinToolExperimentId?: string
  optinToolExperimentName?: string
  phoneNumber: string
}
```

***

## 🧠 How to Listen to Events

You can listen to any of these events using `window.addEventListener()` like this:

```js
window.addEventListener('recart:optin-tool:interaction', (event) => {
  const payload = event.detail;
  console.log('User interaction with opt-in tool:', payload);
});

window.addEventListener('recart:optin-tool:email-captured', (event) => {
  const payload = event.detail;
  console.log('Email captured:', payload.email);
});

window.addEventListener('recart:optin-tool:phone-number-captured', (event) => {
  const payload = event.detail;
  console.log('Phone number captured:', payload.phoneNumber);
});
```

***

## 🛠 Example Use Cases

* Send captured emails or phone numbers to a CRM
* Trigger custom analytics events in tools like Segment or GA4
* Measure interaction rates for popup performance

***

If you have questions about specific interactions, data payloads, or implementation best practices, feel free to contact our support team or your Recart account manager.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.recart.com/developers/client-side-sdk/listening-to-recart-opt-in-tool-events.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.