Messages

Messages guide viewers through a product screen. Use them to explain what matters, point at the next action, or make a region clickable. Add messages from a content step in the editor. Select the step, open Messages, then choose the message style you want to add.

​

Choose a message style

Use Pointer when the viewer needs to notice one exact place, such as a button, input, menu item, or small control. Use Callout when the message matters more than the click target. It works well for explaining a workflow, naming a benefit, or introducing a feature. Use Area when the target is a larger part of the screen, such as a card, chart, settings panel, dashboard section, or table row.

​

Customize a message

Select a message on the canvas or from the Messages list to edit it. You can update the copy, move the message, choose where the card appears, and decide whether clicking it advances the demo. Adjust text alignment, button labels, colors, and corner radius. For area messages, resize the highlighted region to match the UI surface you want viewers to notice.

​

Screenshot and video demos

In screenshot and video demos, messages are placed on top of the captured media. Drag the message to the right position and preview the step to confirm it still points at the intended UI. This format is best when you want a stable, easy-to-polish demo. The message stays fixed to the captured frame, so it is predictable across viewers and embeds.

​

HTML demos

In HTML demos, messages can be pinned to a captured HTML element. When you add a message, pick the element you want the message to follow. Use this when the message should stay connected to a real UI element inside a pixel-perfect HTML capture. Review the step after editing because HTML layouts can have more moving parts than screenshot demos.

​

Related references

• For exact config fields, see Annotations.
• For capture format differences, see Screenshot versus HTML demos.