Manually Edit Pages

Overview

When you need finer control over a page than the SuperAgent provides, or want to save credits, you can edit sections and components directly. Manual edits are a good choice when:

You want to make a small tweak — like swapping out an image or adjusting a headline — without spending credits on a SuperAgent prompt
You have HTML from a previous page or from another tool (such as Claude or another AI service) that you want to copy and paste in
You need to correct a specific section without regenerating the whole page
You are comfortable working directly in the code editor or making CSS adjustments

When to edit manually

Use manual changes for small, targeted edits. For larger structural changes the SuperAgent will be faster.

Guide to Manually Editing a Page

Pages are made up of sections. Each section contains underlying elements and components — such as text, images, forms, and quizzes. When making a manual change, start by identifying which section contains what you want to edit, and then drill down to the specific element.

Open the page you want to edit.
Click the top-left corner of the editor to open the section breakdown and see all sections on the page.
Identify which section contains the content you want to change.

Open the HTML View

To make precise code-level changes, open the HTML editor for a section.

Hover over the section you want to edit and click the pencil (edit) icon that appears in the top-right corner of the section.
The code editor will open with the Content tab, showing the section's HTML, CSS, and JS. Switch to the Style tab for a visual list of CSS options if you prefer not to write code.
If you are editing Code, click Save. All other changes are automatically saved to staging.

Edit a Component Directly

For quick edits to text, images, or other elements, you can click directly on them in the preview without opening the code editor.

Doubleclick on any hardcoded text in a section to edit it inline — change the content or adjust its formatting directly.
1.a. Font style options appear in the toolbar at the top when you click on text. You can also add links, adjust alignment, or make other formatting changes.
Click on other elements (images, buttons, forms) to open their individual editing options.
Changes are automatically saved to your staging version.

Add Tokens

Tokens are dynamic placeholders you can insert into any text on a page or quiz. When a visitor loads the page in staging or production, each token is automatically replaced with the relevant value — such as their location, the date, or a URL parameter. This lets you personalise page content.

Inserting a token

While editing any text element, type {{ to open the token picker. Available tokens include:

Token	Replaced with
`Keyword`	A search keyword or custom URL parameter value
`Search Param`	Any query parameter from the URL
`Date`	The current date
`Month (Full)`	e.g. June
`Month (Short)`	e.g. Jun
`Day`	The current day number
`Year`	The current year
`Day of Week (Full)`	e.g. Monday
`Day of Week (Short)`	e.g. Mon
`Country`	Visitor's country
`Region`	Visitor's region or state
`City`	Visitor's city

Once inserted, the token appears highlighted in blue in the editor. In the editor's view/preview mode the token may show as blank — this is expected. On staging and production it will be replaced with the correct value.

Configuring a token (pages only)

On pages (not quizzes), you can click any blue token in the editor to open a configuration popup with two options:

Fallback value — the text shown if the token cannot be resolved (e.g. if the visitor's location is unavailable, show "USA".)
Rule mapping — define replacement rules so specific token values display as something else

To add a rule, click + Add Rule. A row will appear where you can set what a token value should be replaced with. For example:

Token value usa → display as United States

You can also enable regex matching to match token values using a regular expression pattern and replace them with a hardcoded string.

Click Save after adding or updating any fallback value or rules.

Preview Staging, Publish, Then Preview Live

Manual changes are automatically saved to your staging environment — this is what you see while editing. To review or share the staged version before publishing:

Go back to your pages list.
Your page will show options to view it in Staging or Production. Open the staging link to see your latest saved changes as they will appear to visitors.
When you're happy with the result, click Publish to push your changes to the live production URL.

See Page Views for a full explanation of the different page views and what to check before going live.

Summary

Manual editing gives you direct control over any section or element on your page without using the SuperAgent. Once your edits are in place, read Page Views to understand how to preview your page across different environments and what to check before publishing. Or read Reusable Sections to learn how to reuse sections across multiple pages.