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

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 fired automatically by child login and email form components after successful authentication.

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

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