XOXO

https://xoxo.email/help/
Admin
XOXO is an email newsletter platform that allows creators to write and send emails, design signup...
Tokens:21,527
Snippets:224
Trust Score:4.8
Update:1 week ago
Show doc for...
Tokens:
Raw
### Open a popup from your own code with window.xoxo.popup

Source: https://xoxo.email/help/embed-script

Load the embed script without data-form and call window.xoxo.popup to open a popup from your own code. The example omits async so the API is available on the next line. All options are optional; without a trigger, the popup stays closed until you call open().

```html
<a id="subscribe" href="https://xoxo.email/your-slug" target="_blank" rel="noopener">Subscribe</a>
<script src="https://xoxo.email/embed.js"></script>
<script>
  const form = window.xoxo.popup("your-slug", { location: "bottom-right" })

  document.querySelector("#subscribe").addEventListener("click", (event) => {
    event.preventDefault()
    form.open()
  })
</script>
```

--------------------------------

### Listen for events

Source: https://xoxo.email/help/embed-script

The script dispatches four events that bubble up to the document. This section documents each event and how to register listeners.

```APIDOC
## Events

### Description
The XOXO embed script dispatches four events that bubble up to the document. Their target is the `xoxo-popup` element, whose `data-form` attribute is the form's slug.

### Events

#### `xoxo:ready`
- **Fires**: Once, after the form has loaded, usually before it opens.

#### `xoxo:open`
- **Fires**: Each time the popup opens.

#### `xoxo:submit`
- **Fires**: Each time the form accepts a submission.
- **Note**: Cannot cancel the submission and does not mean the subscriber has confirmed their email.

#### `xoxo:close`
- **Fires**: Each time the popup closes.

### Example
Register listeners before loading the script:
```html
<script>
  document.addEventListener("xoxo:ready", (event) => console.log("Form ready", event.target))
  document.addEventListener("xoxo:submit", (event) => console.log("Form submitted", event.target))
</script>
<script async src="https://xoxo.email/embed.js"></script>
```

### Notes
- Events carry no personal data.
```

--------------------------------

### Listen for xoxo events and load embed script

Source: https://xoxo.email/help/embed-script

Register listeners before loading the script. The script dispatches four events that bubble up to the document: xoxo:ready, xoxo:open, xoxo:submit, and xoxo:close. Events carry no personal data; xoxo:submit can't cancel the submission and doesn't mean the subscriber has confirmed.

```html
<script>
  document.addEventListener("xoxo:ready", (event) => console.log("Form ready", event.target))
  document.addEventListener("xoxo:submit", (event) => console.log("Form submitted", event.target))
</script>
<script async src="https://xoxo.email/embed.js"></script>
```

--------------------------------

### TypeScript Declaration for window.xoxo

Source: https://xoxo.email/help/embed-script

A TypeScript declaration file that adds typing for the window.xoxo API, including the popup method and its options.

```APIDOC
## TypeScript Declaration for window.xoxo

### Description
This declaration file provides TypeScript types for the `window.xoxo` global object, enabling type-safe usage of the popup method.

### Declaration
```typescript
interface Window {
  xoxo?: {
    popup(
      slug: string,
      options?: {
        trigger?:
          | { type: "click"; selector?: string }
          | { type: "delay"; seconds: number }
          | { type: "scroll"; percent: number }
          | { type: "exit" }
        location?:
          | "top-left"
          | "top-center"
          | "top-right"
          | "center-left"
          | "center"
          | "center-right"
          | "bottom-left"
          | "bottom-center"
          | "bottom-right"
      },
    ): { open(): void; close(): void; destroy(): void }
  }
}
```

### Usage Notes
- Keep the file free of `import` and `export` lines so TypeScript treats it as a global declaration.
- `window.xoxo` is optional because the script loads asynchronously; check for its existence before calling, or use `window.xoxo!` after a synchronous `<script>` tag.
```

--------------------------------

### TypeScript global declaration for window.xoxo

Source: https://xoxo.email/help/embed-script

Save this declaration as xoxo.d.ts anywhere your tsconfig.json includes, and window.xoxo is typed. Keep the file free of import and export lines so TypeScript adds xoxo to the global Window rather than reading the file as a module. window.xoxo is optional because the script loads on its own schedule, so check it before calling, or use window.xoxo! after a synchronous <script> tag.

```typescript
interface Window {
  xoxo?: {
    popup(
      slug: string,
      options?: {
        trigger?:
          | { type: "click"; selector?: string }
          | { type: "delay"; seconds: number }
          | { type: "scroll"; percent: number }
          | { type: "exit" }
        location?:
          | "top-left"
          | "top-center"
          | "top-right"
          | "center-left"
          | "center"
          | "center-right"
          | "bottom-left"
          | "bottom-center"
          | "bottom-right"
      },
    ): { open(): void; close(): void; destroy(): void }
  }
}
```

--------------------------------

### Pair a button with an automatic popup using a scroll trigger

Source: https://xoxo.email/help/embed-script

Pair a button with an automatic popup by passing a trigger (here scroll at 50%) and calling open() from the button. With a delay, scroll, or exit trigger, links to the form go to the form's page instead of opening the popup. Use this in place of the Embed drawer code, not beside it, so the page has one popup.

```html
<a id="subscribe" href="https://xoxo.email/your-slug" target="_blank" rel="noopener">Subscribe</a>
<script src="https://xoxo.email/embed.js"></script>
<script>
  const form = window.xoxo.popup("your-slug", { trigger: { type: "scroll", percent: 50 } })

  document.querySelector("#subscribe").addEventListener("click", (event) => {
    event.preventDefault()
    form.open()
  })
</script>
```

--------------------------------

### Open popup from a button with data-trigger-selector

Source: https://xoxo.email/help/embedding-forms

Click-triggered embed that also opens the popup from any element matching the CSS selector in data-trigger-selector. The link is still included and opens the popup as well.

```html
<a href="https://xoxo.email/your-slug" target="_blank" rel="noopener">Subscribe</a>
<script
  async
  src="https://xoxo.email/embed.js"
  data-form="your-slug"
  data-trigger-selector=".subscribe-button"
></script>
```

--------------------------------

### Set popup position with data-location

Source: https://xoxo.email/help/embedding-forms

Exit popup positioned at bottom-right via data-location. Other positions are top-left, top-center, top-right, center-left, center-right, bottom-left, bottom-center, and bottom-right. Center is the default and writes nothing into the code. On small screens the popup is centered regardless of position.

```html
<script
  async
  src="https://xoxo.email/embed.js"
  data-form="your-slug"
  data-trigger-type="exit"
  data-location="bottom-right"
></script>
```

--------------------------------

### Embed Script API

Source: https://xoxo.email/help/embed-script

Reference for the embed script API for popups, events, and styling.

```APIDOC
## window.xoxo.popup

### Description
Creates a popup instance for a form. Use it to open, close, or destroy the popup from your own code.

### Method
`window.xoxo.popup(slug, options)`

### Parameters
- **slug** (string) - Required - The form's slug.
- **options** (object) - Optional - Configuration options.
  - **trigger** (object) - Optional - Trigger configuration. One of: `{ type: "click", selector }`, `{ type: "delay", seconds }`, `{ type: "scroll", percent }`, or `{ type: "exit" }`.
  - **location** (string) - Optional - One of the popup positions.

### Returns
A handle with methods `open()`, `close()`, and `destroy()`.

### Example
```html
<a id="subscribe" href="https://xoxo.email/your-slug" target="_blank" rel="noopener">Subscribe</a>
<script src="https://xoxo.email/embed.js"></script>
<script>
  const form = window.xoxo.popup("your-slug", { location: "bottom-right" })

  document.querySelector("#subscribe").addEventListener("click", (event) => {
    event.preventDefault()
    form.open()
  })
</script>
```
```

--------------------------------

### Exit popup with data-trigger-type="exit"

Source: https://xoxo.email/help/embedding-forms

Exit-intent popup that opens when the pointer leaves the top of the window. Opens once per page view.

```html
<script
  async
  src="https://xoxo.email/embed.js"
  data-form="your-slug"
  data-trigger-type="exit"
></script>
```

--------------------------------

### Timed popup with data-trigger-type="delay"

Source: https://xoxo.email/help/embedding-forms

Timed popup that opens after data-trigger-seconds seconds. Edit the number to change the delay. Opens once per page view.

```html
<script
  async
  src="https://xoxo.email/embed.js"
  data-form="your-slug"
  data-trigger-type="delay"
  data-trigger-seconds="5"
></script>
```
Tokens:
Raw