# ContentGateInline

`<allegro-content-gate-inline>` is placed directly inside an article body to hide the content that follows it. Readers see a registration or login prompt inline; once they authenticate the hidden content is revealed and the gate removes itself from the DOM.

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

Place the component at the point in the article where you want content to be gated:

```html
<div class="article-body">
    <p>This paragraph is always visible.</p>

    <allegro-content-gate-inline>
        <h2>Sign in to keep reading</h2>
        <allegro-login-form></allegro-login-form>
    </allegro-content-gate-inline>

    <p>This paragraph and everything below is hidden until the reader authenticates.</p>
</div>

```

Speedbump (dismissible) mode with a specific position and container:

```html
<allegro-content-gate-inline
    dismissible="true"
    element-position="3"
    article-body-selector=".article-body"
>
    <p>Create a free account to continue reading.</p>
    <allegro-login-form></allegro-login-form>
</allegro-content-gate-inline>

```

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

| Attribute               | Type      | Default   | Description                                                                                                                                                            |
| ----------------------- | --------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `dismissible`           | `boolean` | `false`   | Show a close button allowing the reader to dismiss the gate without authenticating. When `false` the gate is a roadblock; when `true` it is a speedbump.               |
| `element-position`      | `text`    | *(empty)* | Zero-based index of the child element inside the article body after which content should be hidden. When omitted, all next siblings after the gate element are hidden. |
| `article-body-selector` | `text`    | *(empty)* | CSS selector for the article body container used when `element-position` is set. When omitted, the gate's direct parent is used.                                       |
| `tracking-data`         | `text`    | *(empty)* | JSON object of custom data merged into every tracked event, e.g. `"{'placement': 'article'}"`.                                                                         |

## States[​](#states "Direct link to States")

| State     | Trigger               | Description                                                                                     |
| --------- | --------------------- | ----------------------------------------------------------------------------------------------- |
| Roadblock | `dismissible="false"` | Host class `gate-is-roadblock` is applied. No close button is rendered.                         |
| Speedbump | `dismissible="true"`  | Host class `gate-is-speedbump` is applied. A close button lets the reader dismiss without auth. |

## Slots[​](#slots "Direct link to Slots")

| Slot        | Appears in | Description                                                                       |
| ----------- | ---------- | --------------------------------------------------------------------------------- |
| *(default)* | Always     | Content rendered inside the gate — typically a heading and a login or email form. |

```html
<allegro-content-gate-inline>
    <h2>Subscribe to keep reading</h2>
    <allegro-login-form></allegro-login-form>
</allegro-content-gate-inline>

```

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

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

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

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

| Event                        | Detail   | Description                                                                                                                                                                         |
| ---------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `allegro:content-gate:close` | *(none)* | Dispatch on the element to programmatically release content and remove the gate. Also fired automatically by child login and email form components after successful authentication. |

```js
document
    .querySelector('allegro-content-gate-inline')
    .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_inline`    | Fired when the gate renders.        | `{ interactionType: 'dismissible' \| 'roadblock' }` |
| `dismiss_content_gate_inline` | Fired when the reader clicks Close. | `{ interactionType: 'dismissible' }`                |

## 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-inline {
    --contentGateInline--background: #fff;
    --contentGateInline--max-width: 40rem;
}

```

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

| Variable                            | Default  | Description                                                      |
| ----------------------------------- | -------- | ---------------------------------------------------------------- |
| `--contentGateInline--background`   | `#fff`   | Gate background color.                                           |
| `--contentGateInline--color`        | `#000`   | Gate text color.                                                 |
| `--contentGateInline--font-family`  | *(none)* | Gate font family. Falls back to `--allegro--font-family` if set. |
| `--contentGateInline--margin`       | `0`      | Gate margin.                                                     |
| `--contentGateInline--max-width`    | *(none)* | Max width of the gate content wrapper.                           |
| `--contentGateInline--padding`      | `0`      | Gate padding.                                                    |
| `--contentGateInline--children-gap` | `1rem`   | Gap between slotted children inside the gate.                    |

## Example: Dark Background[​](#example-dark-background "Direct link to Example: Dark Background")

```css
allegro-content-gate-inline {
    --contentGateInline--background: #111;
    --contentGateInline--color: #f5f5f5;
}

```