# klaviyo-back-in-stock

> Klaviyo back-in-stock form, in a dialog or popover, for the current variant.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/elements/klaviyo-back-in-stock  
Updated: 2026-10-13

## At a glance

| Panel | Built with | Opens and closes |
|---|---|---|
| A dialog | a Custom element with the tag `dialog` | the button with `type="button"` opens it. Escape closes it, and so does a click outside the first element inside the dialog: keep everything in one Div block inside it |
| A popover | a Div block with the custom attribute `popover` set to `auto`, in place of the dialog | the same button with `type="button"` opens it. Escape and a click outside close it, and it can also have its own close button |

More in [the guide](https://www.smootify.io/docs/features/back-in-stock).

## Where it can go

- **Inside** [`smootify-product`](https://www.smootify.io/docs/reference/elements/smootify-product).
- **Must contain** `form`, `button[type="button"]`.
- **Must contain one of** `dialog`, `[popover]`.
- **Out of place,** Smootify removes it from the page: also without data-company-id.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Fields in the form

Each field’s **Name** setting in Webflow tells Smootify what the field holds. It is a setting of the field, not a custom attribute.

| Name | Field | What it does |
|---|---|---|
| `email` (any case), else the first `input[type="email"]` | Text field, Text field, Type Email | **Required** (“Invalid Email” without it). The address Klaviyo alerts (Webflow’s default Email field works: `data-name="Email"`); every other field is ignored. |

## Attributes on the element

- **It reads** `data-company-id`.

## Loading

Its code loads only on pages that have `klaviyo-back-in-stock`.