Annotations - Inkly

Annotations add guidance on top of a product screen. Use them to point at the next action, explain a feature, call out an important area, or hide sensitive information. Inkly supports three annotation styles: messages, blur masks, and text labels.

Message

A message can be a pulsing pointer, a pinned callout, or a clickable area. Use messages when the viewer needs a short explanation or a clear next step.

{
  "id": "s1_pointer",
  "type": "message",
  "variant": "pointer",
  "x": 0.28,
  "y": 0.34,
  "text": "Just **describe** the flow you want.",
  "anchor": "right",
  "advancesStep": true
}

Field	Type	Required	Default	Notes
`id`	`string`	Yes	—	Annotation id.
`type`	`"message"`	Yes	—	Discriminator.
`variant`	`"pointer"` \| `"callout"` \| `"area"`	No	`"callout"`	`pointer` is a pulsing dot; `callout` is a pinned card; `area` is a clickable rectangle with a pinned card.
`x`	`number`	Yes	—	Normalized x, `0` to `1`.
`y`	`number`	Yes	—	Normalized y, `0` to `1`.
`w`	`number`	No	—	Width of the hit region, `0` to `1`. Used for `variant: "area"`.
`h`	`number`	No	—	Height of the hit region, `0` to `1`. Used for `variant: "area"`.
`text`	`string`	No	—	Message body. Inline markdown.
`target`	`object`	No	—	Optional HTML target for HTML demos. `{ type: "html-element", alphaId }` pins the message to a captured element.
`advancesStep`	`boolean`	No	`true`	Whether clicking the hotspot advances the step.
`anchor`	`"top"` \| `"right"` \| `"bottom"` \| `"left"` \| `"auto"`	No	`"auto"`	Card placement relative to the point.
`textAlign`	`"left"` \| `"middle"` \| `"right"`	No	`"left"`	Message text alignment.
`showNavigation`	`boolean`	No	`true`	Whether the card renders prev/next navigation.
`background`	`string`	No	—	CSS color override for the card background.
`textColor`	`string`	No	—	CSS color override for the message text.
`borderRadius`	`string`	No	—	CSS border-radius override.
`prevButton`	`object`	No	—	`{ label?, hidden }`, where `hidden` defaults to `false`.
`nextButton`	`object`	No	—	`{ label?, hidden }`, where `hidden` defaults to `false`.

Blur

Blur masks a rectangular region.

Field	Type	Required	Default	Notes
`id`	`string`	Yes	—	Annotation id.
`type`	`"blur"`	Yes	—	Discriminator.
`x`	`number`	Yes	—	Normalized x, `0` to `1`.
`y`	`number`	Yes	—	Normalized y, `0` to `1`.
`w`	`number`	Yes	—	Width, `0` to `1`.
`h`	`number`	Yes	—	Height, `0` to `1`.
`intensity`	`number`	No	`8`	Blur radius. Range `0` to `20`.

Text

Text renders a free-floating label.

Field	Type	Required	Default	Notes
`id`	`string`	Yes	—	Annotation id.
`type`	`"text"`	Yes	—	Discriminator.
`x`	`number`	Yes	—	Normalized x, `0` to `1`.
`y`	`number`	Yes	—	Normalized y, `0` to `1`.
`text`	`string`	Yes	—	Label text.
`fontSize`	`number`	No	`16`	Font size in px. Positive.
`color`	`string`	No	—	CSS color.

​Message

​Blur

​Text

Message

Blur

Text