Skip to main content

Zones

A Zone is a named region of the page: a sidebar, a footer, a header, a main content area. Zones are descriptive: the assistant does not click on them. They let it talk about your site in the same vocabulary your users use.

"The link is in the sidebar."
"The save button lives at the bottom of the form."

Without zones, the assistant has to describe locations as raw coordinates ("the link in the top-right"); with zones, it speaks human.

How zones get there​

The Editor offers three paths to register a zone:

1. Custom zone picker​

Always visible at the top of the Zones sub-tab. Click Pick element on page, then click any element you want to name as a zone. Useful for non-standard layouts your site does not declare semantically.

2. Auto-detected landmarks​

Below the picker, the Editor lists the landmark elements your page already declares: <header>, <nav>, <main>, <aside>, <footer>, plus anything with a role="navigation" | "complementary" | …" attribute.

Each row shows the landmark's role and its rough position on the page (top-left, middle-right, etc.) so you can tell duplicates apart at a glance. Click Locate to highlight one on the page; click Register to confirm and name it.

3. Existing zones​

The bottom section lists every zone you have already registered. You can Locate, Edit, Deactivate, or Reactivate each one from here.

What to name them​

Zone names should match how a real user would refer to the area. Good examples:

  • sidebar
  • main_content
  • footer
  • user_menu
  • breadcrumb_bar

Avoid names that describe implementation (div_42, flex_container) or pixel positions (top_left_box).

The label is what the user sees; the identifier is how the assistant references it internally.

Description​

The description grounds the assistant when referring to a zone. Two sentences is usually enough:

The main navigation, including links to Dashboard, Reports, and Settings. Stays visible across all pages.

If you want help drafting, click Suggest description (AI) below the description box.

Telling duplicate landmarks apart​

If your page declares two <nav> elements (a primary nav and a breadcrumb, say), the Editor shows both with the role navigation. The position descriptor on the right (top-left, middle-center, etc.) helps disambiguate. You can also click Locate to highlight one on the page before deciding which to register.

Editing a zone​

Click Edit on the row. You can change:

  • Label
  • Description

You cannot change a zone's identifier or its selector from the Editor; the assistant relies on stable identifiers, and the selector was set when you registered the zone. If a zone's element on the page has moved, deactivate the old one and register a new one in the right place.

Deactivating a zone​

Click Deactivate on the row, then Confirm. The zone disappears from the assistant's vocabulary. Toggle Show inactive to see it again, and Reactivate to bring it back.

Why zones matter​

Zones are the lightest of the three Editor entities. They do not change what the assistant does. But they dramatically improve how the assistant talks. Compare:

  • Without zones: "The save button is the blue button after the form."
  • With zones: "The save button is at the bottom of the Edit Profile zone."

Customers consistently report that adding zones makes the assistant sound noticeably more like a person who has actually looked at their site.