Web Components

Allegro ships a set of custom HTML elements you can drop into any page. Each component handles its own markup, behavior, and styles — just add the script tag and use the element wherever you need it.

Component	Element	Description
Login Form	<allegro-login-form>	Authenticates readers via magic link or OAuth
Email Form	<allegro-email-form>	Collects email addresses with a confirmation state
Content Gate	<allegro-content-gate>	Blocks content behind a full-page registration or paywall prompt
Content Gate Inline	<allegro-content-gate-inline>	Hides inline article content at a specific position until the reader authenticates
Form	<allegro-form>	Renders an admin-composed form of user attributes for the authenticated member
Modal	<allegro-modal>	Shows a centered dialog, such as a welcome note, that the reader closes
Bottom Drawer	<allegro-bottom-drawer>	Raises a panel from the bottom of the screen that does not block the page

Previewing components

The Allegro admin includes a Component Previews page under the Developer section. It renders each component in isolation so you can tweak attributes and see results without deploying to your site.

Navigate to /developer/components in your Allegro instance to open the preview tool.

Previewing as a signed-in member

Some components behave differently for an authenticated reader — the Form component, for example, renders the current member's saved values. The preview sandbox includes a Preview as selector so you can render a component as if a specific audience member were signed in, without leaving the admin or touching your live site.

Pick a member from the selector (search by email or display name) to render the component inside an authenticated session for that member. Choose Logged out to return to the anonymous view.

Previews use the member's real record

A component previewed as a member acts on that member's real data. If you submit the Form component while previewing as someone, their stored attribute values are updated for real.

The selector only appears for roles that can edit audience members, and outside a production environment it is limited to super admins.

Attribute suggestions

Text attributes that map to existing data offer autocomplete suggestions as you fill them in. The Form component's slug attribute, for instance, suggests the slugs of forms already defined in your organization, so you can preview a real form without copying its slug by hand.