Skip to main content

Managing Zones

A Zone is a named region of a page: the sidebar, the navigation, the footer, an info area. Zones are descriptive only: the assistant does NOT click on them or fill them in. They exist so it can ground references like "the link in the sidebar" or "the notifications area" against a stable, customer-named topology.

Think of zones as the page's table of contents for the assistant. Controls are verbs ("click submit"); Forms are typed input schemas ("fill order address"); Zones are nouns ("the sidebar").

Auto-detected vs custom zones​

The Editor's Zones sub-tab opens with an Auto-detected landmarks section at the top. Appilot walks the page for the standard regions any well-marked-up page declares: <header>, <nav>, <main>, <aside>, <footer>, and the matching role= attributes. Each one it finds is proposed as a candidate.

You confirm the candidate by clicking Register, optionally renaming it, and writing a short description.

For non-standard layouts (a sidebar built out of <div>s with no landmark role), use Pick element on page under the Custom zone section. The picker highlights any element you hover. Click to confirm.

Registering a zone​

  1. Open the extension on the page you want to describe.
  2. Switch to the Editor tab, then the Zones sub-tab.
  3. Either click Register on an auto-detected landmark, or use Pick element on page for a custom zone.
  4. Fill the form:
    • Semantic ID: auto-suggested. Lowercase, underscores, no spaces. Example: order_history_sidebar.
    • Label: short and human-readable. Example: "Order history sidebar".
    • Description: when would the assistant reference this region? Example: "Lists the user's recent orders; clicking an entry opens the detail view in the main area."
  5. Save.

The zone appears under Registered zones. You can re-locate it on the page any time (click Locate).

What fields are editable here​

The extension Editor handles the basics: label, description, selector. For everything else (scoping to specific views, nested parent-zone relationships, archive), open the deep editor via the Open in Backoffice for advanced settings → link in the zone's edit panel.

How zones improve the assistant​

A few examples of what changes once zones are registered:

  • User: "Show me the menu on the left."
    Assistant (no zones): tries to scan the page DOM, often picks the wrong element.
    Assistant (with a registered side_menu zone): explains what's in the side menu and offers to navigate to a specific entry.
  • User: "Where do my notifications show up?"
    Assistant with a registered notifications_area zone: points the user at the right region instead of generically pointing to "the top right".

"Show on page" links​

Whenever the assistant names a registered zone in its prose, the zone label can render as a Show on page link. Older turns and admin audit views may also show the same zone as a small chip below the answer. Clicking either affordance outlines the region on the page so the reader can find it without scanning. The outline uses a soft amber dashed border and fades after a couple of seconds.

The visible label is always the label you authored, verbatim, even if the conversation language differs. Keep zone labels short, recognisable and in the page's own language; that's what the user sees on the page itself.

The affordance is a locator. Clicking it never clicks anything in your app; it only draws the outline. For affordances that the user is expected to click (buttons, form fields), register a Control, not a Zone; Controls and Forms are what feed guided Action Plans.

Web MCP note​

Zones map to MCP Resources in the Web MCP standard. When you export your Appilot configuration to a future Web MCP server, the description you wrote here becomes the resource description verbatim. Writing clearly here pays back twice: better in-Appilot answers today, ready-to-go MCP resource definitions tomorrow.