Target Registration

Targets are the UI elements KiBee can guide users to. Mark them in HTML with data-kibee-id, then register them with the SDK so the bee knows their labels and roles.

Step 1 — Mark elements in HTML

Add a data-kibee-id attribute to any interactive element you want the bee to fly to. The value must be unique within a page.

HTML

<input data-kibee-id="company-name" type="text" placeholder="Company name" />
<button data-kibee-id="invite-team">Invite team</button>
<a data-kibee-id="upgrade-link" href="/billing">Upgrade plan</a>

Step 2 — Register targets with the SDK

Call kibee.registerTargets() after the DOM is ready, typically on each page load or route change. Pass the same IDs you used in the HTML.

JavaScript

kibee.identifyPage("onboarding");

kibee.registerTargets([
  {
    id: "company-name",
    label: "Company name field",
    target: { kibeeId: "company-name" },
    description: "The primary name for your workspace",
  },
  {
    id: "invite-team",
    label: "Invite team button",
    target: { kibeeId: "invite-team" },
    description: "Sends email invitations to teammates",
  },
  {
    id: "upgrade-link",
    label: "Upgrade plan link",
    target: { kibeeId: "upgrade-link" },
  },
]);

Target object shape

Field	Type	Required	Description
`id`	`string`	Yes	Unique identifier used in flow steps and API calls.
`label`	`string`	Yes	Human-readable name shown in the Admin Console and used for intent matching.
`target.kibeeId`	`string`	Yes	Matches the `data-kibee-id` attribute on the DOM element.
`description`	`string`	No	Extra context for intent matching and the Hive console.

Re-registering on route changes

In single-page applications, call registerTargets again whenever the page content changes. KiBee replaces the previous target list for the current page — old targets are not accumulated.

React (useEffect)

useEffect(() => {
  const runtime = getBrowserKiBee();
  if (!runtime) return;
  runtime.identifyPage(`app-${currentSection}`);
  runtime.registerTargets(SECTION_TARGETS[currentSection]);
}, [currentSection]);

Why kibeeId instead of CSS selectors

KiBee uses stable data-kibee-id attributes rather than CSS class names or DOM paths. This means targets survive redesigns, component refactors, and framework migrations. A class name can change in a design sprint; a kibeeId is an intentional integration contract.

Tip: Name targets after what they do, not what they look like. "submit-signup" is better than "blue-button-right" — flows built against semantic names stay valid through visual redesigns.