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.

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

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, a dismiss, or a programmatic close) 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'}".

States

The component sets these classes on itself while the dialog is open.

State	Trigger	Description
overlay-active	Dialog renders	Set whenever the dialog is open.
overlay-is-speedbump	Dialog renders with dismissible	The reader can close the dialog.
overlay-is-roadblock	Dialog renders, not dismissible	The reader must authenticate to close the gate.

Slots

Slot	Appears in	Description
(default)	Dialog	The dialog's content, such as a heading and a login form.

Events

Dispatched

Event	Bubbles	Detail	Description
allegro:content-gate:open	yes	(none)	Fired immediately after the dialog renders and becomes visible.
allegro:interaction:ungate	no	{ slug: string }	Fired on window when the gate closes inside an interaction. The SDK removes that interaction's blur or truncation, then fires allegro:interaction:ungated.

Listened to

Event	Detail	Description
allegro:content-gate:close	(none)	Dispatch on the element to programmatically dismiss the dialog.
allegro:magic-link:authenticated	(any)	Listened to on window. Closes the dialog once the reader signs in with a magic link.
allegro:login-form:third-party:authenticated	(any)	Listened to on window. Closes the dialog once the reader signs in with a third-party provider.

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 reader dismisses the dialog with the close button or Escape. A programmatic close is not tracked.	{ 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	var(--allegro--color-background, #fff)	Dialog background color.
--contentGate--color	var(--allegro--color-text, #000)	Dialog text color. Also used as the close button icon color.
--contentGate--font-family	var(--allegro--font-family)	Dialog font family.
--contentGate--margin	0	Dialog margin.
--contentGate--max-width	100%	Max width of the dialog content wrapper.
--contentGate--padding	0	Dialog padding.
--contentGate--border-radius	0	Dialog border radius.
--contentGate--children-gap	var(--allegro--spacing, 1rem)	Gap between slotted children inside the dialog.
--contentGate--z-index	9999	Stacking order of the dialog.

Overlay

Variable	Default	Description
--contentGate--overlay--background	rgb(0 0 0 / 0.7)	Backdrop color behind the dialog.

Close button

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

Parts

Style the component's own elements with ::part().

Part	Element
dialog	The <dialog> element.
overlay	The backdrop behind the dialog.
wrapper	The wrapper around the close button and content.

Example: Dark Background

allegro-content-gate {
    --contentGate--background: #111;
    --contentGate--color: #f5f5f5;
    --contentGate--overlay--background: rgb(0 0 0 / 0.85);
    --contentGate--max-width: 36rem;
}