Zum Hauptinhalt springen

Managing Zones

A Zone is a named region of a page, sidebar, navigation, footer, 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, and proposes each 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, 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, not an action. 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.