Templates

Templates are reusable building blocks for the experiences you deploy to your readers. Design a component once — with its own HTML, JavaScript, and CSS — then use it across as many Interactions as you need.

Overview

Think of a template as a self-contained widget. It holds everything the browser needs to render a component: markup for structure, styles for presentation, and scripts for behavior. On top of that, you can define fields — named placeholders that each Interaction fills in with its own values — so one template can power many different experiences.

Templates also support external CSS URLs for loading fonts, icon libraries, or CSS frameworks alongside your code.

Creating a Template

Head to Templates → New Template, give it a title, and start writing your HTML, CSS, and JavaScript. A URL-friendly slug is generated from the title on first save. Renaming the template later won't change the slug, so any Interactions that reference it stay linked.

Editor assistance

As you type HTML, the editor autocompletes Allegro's web components — such as <allegro-login-form>, <allegro-email-form>, <allegro-content-gate>, and <allegro-content-gate-inline> — and shows hover documentation describing what each element does. Completion for your template fields ({% field %}) works alongside it, so you don't have to remember exact element or field names.

Status

Every template starts as a Draft so you can iterate without affecting live Interactions. When you're ready, publish it.

Status	Meaning
Draft	Work in progress — not available for use in Interactions
Published	Ready to use

Fields

Fields make templates flexible. Instead of hard-coding copy or settings, you define named variables that each Interaction supplies at render time.

For example, a "Subscribe Banner" template might expose a headline field. One Interaction sets it to "Join our newsletter", another to "Get daily updates" — same template, different message.

Each field has these properties:

Property	Description
Name	A human-readable label (e.g. "Email Placeholder")
Slug	The variable name used in your code (e.g. emailPlaceholder). Auto-generated from the name if left blank.
Description	Help text shown to whoever configures the Interaction
Type	Text, Textarea, Rich text, Number, Checkbox, Select, or Group — see Field Types
Label	The name shown to whoever fills the field in. Defaults to the slug in words.
Tab	The tab the field appears in when an Interaction fills it in. Fields without one appear under General.

Field Types

Type	What the Interaction editor fills in
Text	A single line of text
Textarea	Several lines of plain text
Rich text	Formatted text: bold, italic, links, and bulleted and numbered lists
Number	A number
Checkbox	On or off
Select	One choice from a list of options you define on the field
Group	A list of items, each with its own set of subfields (see below)

For a Select field, add each option in the field's Options list. The value is what your template receives; the optional label is what the Interaction editor sees.

For a Rich text field, untick any formatting under Formatting that editors shouldn't use. Everything else a field holds appears on the page as plain text, so HTML typed into a Text or Textarea field shows as typed.

Repeatable Fields and Groups

Turn on Repeatable for a field when an Interaction needs a list of values instead of one, such as several links. The Interaction editor can then add, remove, and reorder items.

Use a Group when each item needs more than one value. For example, a newsletter sign-up template can have a newsletters group with title, image, and id subfields, so each Interaction lists its own newsletters. Groups are always repeatable. A group's subfields can be repeatable or groups themselves, so an FAQ can have a sections group whose items each hold a questions group of questions and answers. Groups nest up to three levels.

Text, Number, Checkbox, and Select values can be up to 200 characters; Textarea and Rich text values up to 10,000. A list can have up to 50 items.

Tabs

Give fields a Tab to split a long list of fields into tabs when an Interaction fills them in, such as Header, FAQ, and Contact. Tabs appear in the order of their first field, after a General tab for fields without one. The Fields list in the template editor groups fields the same way.

Default values

A field can ship with a default value, defined by whoever builds the template. When an Interaction uses the template, every field starts filled in with its default. Fields you leave alone keep following the template, so a later change to the default reaches them. Once you edit a field, the Interaction keeps its own value, even if you clear it.

Using Fields in Your Code

Reference a field by wrapping its slug in {% %} anywhere in the HTML:

<h1>{% headline %}</h1>
<input placeholder="{% emailPlaceholder %}" />

Repeat part of the HTML for each item of a repeatable field with a loop. Inside the loop, {% item %} is the current item, and {% item.title %} is a group item's title subfield:

{% for newsletter in newsletters %}
<h3>{% newsletter.title %}</h3>
{% endfor %}

Typing {% in the HTML editor suggests every field, and picking a repeatable field inserts its loop for you.

Templates can also show a visitor's meter numbers, such as how many free articles they have left, with {% meter.<slug>.remaining %} and similar placeholders. See Showing a Meter in a Template.

External CSS URLs

Need Google Fonts, a CSS reset, or a utility framework? Add the stylesheet URLs to the template and they'll be injected as <link> tags at render time — no manual <head> editing required.

Revision History

Every save creates a new revision automatically. You can browse the full history, compare any two versions side by side, and roll back whenever you need to. See Revisions for details.

Archiving

Templates are never permanently deleted right away. Instead, you archive them:

• Archived templates disappear from normal listings.
• Members and admins can restore an archived template at any time.
• Only admins can permanently delete one.

To archive, open the template and choose Archive from the actions menu. To restore, switch to the Archived filter in the Templates list.

Permissions

For details on who can manage templates, see Permissions.

Showing Plans

A template can show the plans of an offer, such as a "choose your subscription" card. On the template's Options tab, check Shows plans from an offer. Templates synced from GitHub declare this in their template.json instead.

Once a template shows plans:

• Every Interaction that uses it must choose an Offer. The picker appears under the template in the Interaction editor and lists each offer with its number of plans.
• The template shows that offer's plans in the order set on the offer, along with each plan's plan fields that aren't marked private.
• A field on the template can't use the slug plans.
• Template previews show two sample plans, not the chosen offer's plans.

If an Interaction has no offer, or its offer has no plans, the template is not shown to readers. The Interaction editor warns you when this happens.

Changes to the offer's plans, such as a new price or a different order, reach readers without editing or republishing the Interaction.

For the placeholders and data a template uses to show plans, see Plans in the developer docs.

Editing template.json

Every template has a template.json that describes its name, fields, and options as JSON. To see it, open the template, go to the Options tab, and click Edit template.json.

The file always matches the template: it reflects the fields on the Fields tab, including changes you haven't saved yet. To change the template through it:

1. Edit the JSON. The editor suggests properties and field types as you type, shows each property's description when you hover over it, and underlines anything that doesn't match the schema.
2. Click Apply. The name, fields, and options update on their tabs. If the JSON has errors, Apply lists them and changes nothing.
3. Click Save to keep the changes, as with any other edit.

Properties templates don't store, such as plans, are listed before you apply and left out.

For a template synced from GitHub, the button reads View template.json and shows the file as it was last synced. Edit it in the repository instead.

Moving a template to GitHub

To move a template you built in Allegro into a GitHub-synced repository, copy its template.json into a folder alongside the template's index.html, index.css, and index.js. The template_json value returned by the REST API's get template endpoint and the MCP get-template tool has the same contents.

How Templates Render

When an Interaction triggers, Allegro injects the template into the page at the configured position. Each template runs in its own isolated environment, so its styles won't affect the rest of the page and the page's styles won't bleed in.

Templates support Alpine.js for reactive behavior and Allegro's web components (login form, email capture, content gate) out of the box — no extra setup required.

For technical details on the rendering model, available JavaScript context, and Alpine.js data, see the Templates guide in the developer docs.

Tips

• Keep CSP in mind. Template HTML, CSS, and JavaScript run in the reader's browser. If your site enforces a strict Content Security Policy, make sure inline scripts and styles are allowed.

Related

• Interactions — Deploy templates to your readers
• Revisions — Full version history and rollback