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.

See every state of <allegro-content-gate-inline> in Storybook.

Usage

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

<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:

<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

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

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.

The hidden content is moved into a <div class="allegro-content-gate-overlay" inert> after the gate. inert keeps keyboard and screen-reader users out of it until it is released, whichever way you style the overlay (hidden, faded, or blurred).

Slots

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

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

Events

Dispatched

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

Listened to

Event	Detail	Description
allegro:content-gate:close	(none)	Dispatch on the element to programmatically release content and remove the gate. Also closes the gate when a slotted <allegro-email-form> dispatches it from its confirmation screen.
allegro:magic-link:authenticated	(any)	Listened to on window. Releases content and removes the gate once the reader signs in with a magic link.
allegro:login-form:third-party:authenticated	(any)	Listened to on window. Releases content and removes the gate once the reader signs in with a third-party provider.

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

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

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

allegro-content-gate-inline {
    --contentGateInline--background: #fff;
    --contentGateInline--max-width: 40rem;
}

General

Variable	Default	Description
--contentGateInline--background	var(--allegro--color-background, #fff)	Gate background color.
--contentGateInline--color	var(--allegro--color-text, #000)	Gate text color.
--contentGateInline--font-family	var(--allegro--font-family)	Gate font family.
--contentGateInline--margin	0	Gate margin.
--contentGateInline--margin-bottom	1.5rem	Space below the gate element.
--contentGateInline--max-width	100%	Max width of the gate content wrapper.
--contentGateInline--padding	0	Gate padding.
--contentGateInline--border-radius	0	Gate border radius.
--contentGateInline--children-gap	var(--allegro--spacing, 1rem)	Gap between slotted children inside the gate.

Close button

Variable	Default	Description
--contentGateInline--close--size	2.5rem	Width and height of the close button.

Example: Dark Background

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