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

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

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

The dialog is modal: focus stays inside it and the page beneath is inert. Give it a name with label, or start the slotted content with a heading. When the dialog closes, focus returns to whatever had it before the dialog opened. A non-dismissible dialog (a roadblock) ignores Escape.

Revealing gated content after login

When a content gate sits inside an interaction that also blurred or truncated the article behind it, closing the gate after a successful login reveals that content instead of leaving it hidden. The gate finds its host interaction, removes the blur or truncation, and the full article is shown in place. To react to this yourself, listen for allegro:interaction:ungated on window.

Attributes

Attribute	Type	Default	Description
allow-scroll	boolean	false	Leave the page scrollable while the dialog is open. By default the page scroll is locked.
dismissible	boolean	false	Show a close button allowing the user to dismiss the dialog. Escape also dismisses it.
label	text	(empty)	Name screen readers announce for the dialog. Defaults to the first slotted heading, then "Continue reading".
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

Dispatched

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

Listened to

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

document
    .querySelector('allegro-content-gate')
    .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	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

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

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.