All Collections
Annotation Options
Annotation Options
Patrick Farley avatar
Written by Patrick Farley
Updated over a week ago

When you are editing a specific annotation, there is a set of options you use to configure it.

Start Time

You can set the start time ahead one second by clicking on the right arrow; back, by clicking on the left.  Click 'Start Time' to fine-tune it down to the thousands of a second or a specific percentage in the video.

The start time field is flexible and accepts the following inputs.

  • 20 (20 seconds)

  • 00:20.000 (20 seconds)

  • 1:37 (1 minute and 37 seconds)

  • 97 (1 minute and 37 seconds)

  • 15% (15% of the way into the video.)

  • -15 (15 seconds before the end of the video)

  • -10% (10% before the end of the video)

Pro Tip: % based and negative start times are particularly useful for templates.


The duration of time that the annotation remains on screen. If Pause is set to Y, the duration of the annotation is the duration it is paused.

What happens when a viewer clicks on the annotation. Detail here.


Set Pause:Y if you'd like the video to pause when it reaches this annotation.  Set Pause: N if not.
Note when you set Pause:Y, the duration of the annotation is the duration it is paused. Note: When Pause is set to Y, ensure Gate is set to N.


A gate is a point in the video that a viewer can not pass unless they interact with that annotation. This is used most often to ensure that someone takes a quiz or submits an email before continuing on in the video.
Note: When Gate is set to Y, ensure Pause is set to N.

Display Rule (Available to Enterprise Licenses)

Used to display an annotation only under certain conditions (for example only for new viewers). You set the JavaScript Expression under which you'd like the annotation to display (ex/ viewer=='new'). You can pass in these JavaScript Expressions from an external system using the HapYak APIs or set it when a viewer clicks on another annotation in the Link option (ex/ viewer="new"). Read more about Display Rules here.

Add Class (Available to Enterprise Licenses)

Adds a specific CSS class to the project.  Used to custom style-specific annotations. Note, you will need to include this CSS class in a custom stylesheet at your group-level CSS or project-level CSS.


Change the background color and opacity. This will override any group-level or project-level style you have set.


Canned styles for the annotation.  Most often used to change the text color from white to black or vice versa (select "White" or "Black".)


How the annotation appears and disappears from the screen.

Did this answer your question?