# ContentGate

`<allegro-content-gate>` is a full-page dialog that renders immediately and blocks interaction with the page beneath it. Slotted children are displayed inside the dialog. Use it to build registration walls, subscription prompts, or any other gated experience.

## Usage[​](#usage "Direct link to Usage")

```html
<allegro-content-gate>
    <div>
        <h2>Subscribe to continue reading</h2>
        <allegro-login-form></allegro-login-form>
    </div>
</allegro-content-gate>

```

With a dismiss button and centered position:

```html
<allegro-content-gate dismissible="true" position="center">
    <p>Sign in to access premium content.</p>
</allegro-content-gate>

```

## Attributes[​](#attributes "Direct link to Attributes")

| Attribute       | Type      | Default   | Description                                                                                                    |
| --------------- | --------- | --------- | -------------------------------------------------------------------------------------------------------------- |
| `dismissible`   | `boolean` | `false`   | Show a close button allowing the user to dismiss the dialog.                                                   |
| `position`      | `text`    | `bottom`  | Dialog position on screen. `bottom` anchors to the bottom edge; `center` floats in the middle of the viewport. |
| `tracking-data` | `text`    | *(empty)* | JSON object of custom data merged into every tracked event, e.g. `"{'placement': 'article'}"`.                 |

## Events[​](#events "Direct link to Events")

### Dispatched[​](#dispatched "Direct link to Dispatched")

| Event                       | Bubbles | Detail   | Description                                                     |
| --------------------------- | ------- | -------- | --------------------------------------------------------------- |
| `allegro:content-gate:open` | yes     | *(none)* | Fired immediately after the dialog renders and becomes visible. |

### Listened to[​](#listened-to "Direct link to Listened to")

| Event                        | Detail   | Description                                                     |
| ---------------------------- | -------- | --------------------------------------------------------------- |
| `allegro:content-gate:close` | *(none)* | Dispatch on the element to programmatically dismiss the dialog. |

```js
document
    .querySelector('allegro-content-gate')
    .dispatchEvent(new CustomEvent('allegro:content-gate:close'));

```

## Tracked Events[​](#tracked-events "Direct link to Tracked Events")

The component records the following events via the Allegro SDK.

| Event                  | When                                                                    | Data                                                                  |
| ---------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `view_content_gate`    | Fired when the dialog first renders.                                    | `{ position: string, interactionType: 'dismissible' \| 'roadblock' }` |
| `dismiss_content_gate` | Fired when the user dismisses the dialog via the close button or event. | `{ position: string }`                                                |

## CSS Variables[​](#css-variables "Direct link to CSS Variables")

All visual properties are exposed as CSS custom properties so the component can be themed from the host page without piercing the shadow DOM.

```css
allegro-content-gate {
    --contentGate--background: #fff;
    --contentGate--max-width: 40rem;
}

```

### General[​](#general "Direct link to General")

| Variable                            | Default  | Description                                                                    |
| ----------------------------------- | -------- | ------------------------------------------------------------------------------ |
| `--contentGate--background`         | `#fff`   | Dialog background color.                                                       |
| `--contentGate--color`              | `#000`   | Dialog text color. Also used as the close button icon color.                   |
| `--contentGate--font-family`        | *(none)* | Dialog font family. Falls back to `--allegro--font-family` if set.             |
| `--contentGate--margin`             | `0`      | Dialog margin.                                                                 |
| `--contentGate--max-width`          | `100%`   | Max width of the dialog content wrapper.                                       |
| `--contentGate--padding`            | `0`      | Dialog padding.                                                                |
| `--contentGate--children-gap`       | `1rem`   | Gap between slotted children inside the dialog.                                |
| `--contentGate--button--background` | *(none)* | Close button background. Falls back to `--allegro--button--background` if set. |
| `--contentGate--button--color`      | *(none)* | Close button icon color. Falls back to `--allegro--button--color` if set.      |