Templates

This guide covers the technical details of how Allegro templates are rendered on the page. For an overview of creating and managing templates, see Templates in the product docs.

Rendering Model

When an Interaction triggers, Allegro creates a host <div> and attaches an open shadow root to it. All of the template's markup, styles, and external stylesheets are injected inside that shadow root before the host is placed in the DOM at the configured target position.

The shadow DOM provides full CSS isolation — styles defined in the template don't leak out to the host page, and the host page's styles don't bleed in.

The host element carries a data-allegro-interaction attribute set to the Interaction's slug, which you can use for external targeting if needed:

/* from the host page — selects the template host element */
[data-allegro-interaction='my-interaction'] {
    margin-top: 2rem;
}

Alpine.js

Alpine.js v3 is loaded automatically from CDN the first time a template renders — no <script> tag required. If Alpine is already present on the page, Allegro uses it directly.

Alpine is initialized on the shadow root, so directives in your template HTML work as expected.

x-data Scope

A root x-data object is set up automatically on the template's container element. It exposes:

Property	Type	Description
session	object | null	The reader's current session from the stored JWT (includes id, authenticated_at), or null if no session exists.
audience_member	object | null	The authenticated member's profile from the JWT (includes id, email, name, etc.), or null if not logged in.
interaction	{ slug: string }	The slug of the Interaction that triggered this template.
(extra data)	any	Any additional data passed when the Interaction was triggered is merged in at the top level.

Example — personalizing content based on authentication state:

<div x-show="audience_member !== null">
    Welcome back, <span x-text="audience_member.name"></span>!
</div>

<div x-show="audience_member === null">
    <p>Sign in to continue reading.</p>
    <allegro-login-form></allegro-login-form>
</div>

Example — reading extra data passed by the Interaction trigger:

<!-- if the interaction was triggered with { articleId: '123' } -->
<p x-text="`Reading article ${articleId}`"></p>

For the full list of Alpine directives and features, see the Alpine.js documentation.

Web Components

Allegro's built-in web components are registered on the page by the SDK and are available inside templates:

Component	Description
<allegro-login-form>	Login form with email/password and social login
<allegro-email-form>	Email capture form
<allegro-content-gate>	Paywall / content gate

See the Components section for each component's attributes, events, and CSS variables.

Field Placeholders

Field values defined on the Interaction are substituted into the template HTML before rendering. Reference a field by its slug wrapped in {% %}:

<h2>{% headline %}</h2>
<p>{% bodyText %}</p>
<a href="{% ctaUrl %}">{% ctaLabel %}</a>

Substitution runs before Alpine.js initializes, so field values are baked into the HTML and can be used inside Alpine expressions:

<div x-data="{ open: false }">
    <button @click="open = !open">{% toggleLabel %}</button>
    <p x-show="open">{% bodyText %}</p>
</div>