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>

Attributes

Attribute	Type	Default	Description
dismissible	boolean	false	Show a close button allowing the user to dismiss the dialog.
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.
--contentGate--button--background	(none)	Close button background. Falls back to --allegro--button--background if set.
--contentGate--button--color	(none)	Close button icon color. Falls back to --allegro--button--color if set.