Set Up

  1. Navigate to the project you would like to add the annotation to.
  2. Add an iframe to the project and set the start time to 1 second (this can be wherever you would like but we recommend gating the content at the beginning or after an intro sequence) and the duration to .1 seconds. 
  3. In the iframe url source add the following url:
//hapyak_demos.s3.amazonaws.com/widgets/sign-in/signin-and-email-custom-annotation.html?sendTo=(add email here)

Make sure you replace the parenthesis section with the email address you would like the alerts to be sent to. After the iframe loads, click on the quick edit menu, click more, and click 'Add Class' add the following class into the field:

hapyak-annotation-full-frame

This ensures the annotation takes up the full height and width of the video.

Also set the 'Gate' option to Y. This prevents users from clicking on the timeline and skipping the annotation.

The last option to configure is adding a display rule to hide the iframe after completion of the form. Click 'Display Rule' and add the following:

!loginComplete

Advanced Configuration

If you would like to adjust other variables, such as a custom welcome message, custom fields, showing or hiding the skip button, etc, then your best bet is to download the code below open in a code editor, make your edits and then copy and paste it into the HTML field of the iframe source. Read the comments at the top of the code block for instructions on how to customize the form. Remember to add a email address to the send_to_email field within the HTML. Also remember to set the 'Gate' to Y, 'Add Class' field to hapyak-annotation-full-frame, and 'Display Rule' to !loginComplete on the iframe itself.

Did this answer your question?