How to add annotations to videos and interactive demo

Add annotations to your videos and demos to highlight key details, tips, or warnings at the exact moment viewers need them.

Crafted using Floik

An annotation is an element you can add to a video or interactive demo. It appears as a card at a set point in time, with an icon, a title, and a description. You can add multiple annotations to the same video or demo, but their time ranges can't overlap.

Annotations come in four types, each suited to a different kind of message:

  • Quick Note: a small piece of context or clarification that helps the step make sense.
  • Key Insight: a detail worth pointing out, like a reason behind a step or a tip that saves time.
  • Announcement: something new or changed that the viewer should know about, such as an updated setting or feature.
  • Alert: a caution, like an action that can't be undone or a step that's easy to get wrong.
Why use Annotations

Annotations let you call out information at the exact moment it's relevant, without cluttering the rest of your video or demo. Since each type has a distinct icon, viewers can tell what kind of information they're looking at before they read it.

How to add an annotation
  1. In the Edit panel, go to Add elements and click Annotation. The Add annotation panel opens on the right.
  2. Turn on Hide other elements to hide overlapping elements, such as a CTA or spotlight, placed at the same timestamp. This is for editing only and has no effect on what viewers see.
  3. Select a Type: Quick Note, Key Insight, Announcement, or Alert.
  4. Set the Start time and End time to control exactly when the annotation appears and disappears.
  5. Enter a Title and a Description. The description supports bold, italics, underline, bulleted and numbered lists, and links.
  6. Under Position, click a cell in the grid to set where the annotation sits on screen.
  7. Turn on Include sound effect if you want a sound to play when the annotation appears.
  8. Turn on Stay always if you want the annotation to stay on screen for its full duration, with no close button for viewers to dismiss it early.
  9. Click Apply. The annotation appears at its set time, and the Annotation panel opens, listing every annotation you've added along with its title, type, and timing.
How to edit, delete, or add another annotation
  1. To edit an annotation, click its entry in the Annotation panel. The Edit annotation panel opens with your details filled in. Change any field and click Apply.
  2. To delete an annotation, open its three-dot menu in the Annotation panel, click Delete, then confirm.
  3. To add another annotation, click Add annotation at the top of the panel, and configure it the same way.
Best practices
  • Time ranges can't overlap, so plan your annotations against your video or demo's timeline before adding them.
  • Reserve Stay always for information viewers genuinely shouldn't be able to skip past, since it removes their ability to dismiss it.
  • Match the type to the message. Reserve Alert for actions with consequences, so it keeps its weight when viewers see it.
  • Use Include sound effect sparingly. It's most effective when reserved for the annotation that matters most in a given video or demo.

✨ Create using AI Seamlessly – Chrome Browser Extension Required! ✨

Trusted by enterprises & innovative SaaS companies

Integrated Power Services
Precision Pumping Systems
Toptal
BHSF
Edgewater Park Township School District