Placing anchors on your site

The copilot never uses CSS selectors, XPath or JavaScript to find something on your page — only an attribute you add by hand:

data-copilot-anchor="<screenId>:<anchorId>"

Note — This attribute name is neutral and doesn’t change with your provider’s brand

The SDK looks for data-copilot-anchor in your page’s HTML, regardless of the brand your provider delivers the rest of the product under. Write it exactly as shown in your code; if you rename it, the copilot won’t find the element.

For example, in a customer sign-up form:

<input name="name" data-copilot-anchor="leads.new:name" />
<input name="phone" data-copilot-anchor="leads.new:phone" />
<button type="submit" data-copilot-anchor="leads.new:save">Save</button>

An element without this attribute is invisible to the copilot, even if it’s in plain view on screen — it’s what makes sure the copilot can only touch what you decided to expose.

Note — Compatibility with existing integrations

The SDK still recognizes the previous attribute, data-aymar-anchor, so an integration already built with that name keeps working. The one thing that isn’t allowed is putting both attributes on the same element with different ids — the SDK doesn’t pick one of the two: it treats the element as misconfigured and fails closed (outcome: "host_error"). Requires copilot SDK version 1.1.0 or later; with an older version, use only the previous attribute.