Friendly Warning: welcome to developer territory. 

You will have a lot of fun if you are comfortable with HTML, Javascript and CSS, or have a friend / colleague that is. If not, you may have a bad time. 

If you are a real do-it-yourselfer and want to learn yourself, we highly recommend first taking Codeacademy's free HTML/CSS and JavaScript courses. 

The sign-in annotation is a flexible, powerful annotation that lets you track known viewers. It is used to generate leads, to have learners and trainees sign in, to add a gate to a video, etc...

The viewer will only have to sign in once, and we'll automatically remember them every time they watch a HapYak video on the same device. Note this is an early prototype under development. Please help make it better by emailing us with feedback.

Add a Sign In Annotation

  1. In a HapYak project, Add an iframe annotation. URL tab. Paste in this URL // 
  2. Click Submit.
  3. Set Gate: Y, Pause: N, Display Rule to !loginComplete, Class to ``hapyak-annotation-full-frame. Click Done.
  4. To test it out, open the landing page in a new incognito window (this will ensure you'll watch the viewer as a new viewer.)

Add a Customizable Sign In Annotation

  1. In a HapYak project, Add an iframe annotation. HTML tab. Paste in the code below. Click Submit.
  2. Set Gate: Y, Pause: N, Display Rule to !loginComplete, Class to full-frame.
  3. Modify the variables (like Welcome message, hint text, button text, color, etc...)
  4. To test it out, open the landing page in a new incognito window (this will ensure you'll watch the viewer as a new viewer.)
<!DOCTYPE html>
  <meta charset="utf-8">
  <title>Sign In</title>
    Set Display Rule to "!loginComplete"
    Set Gate to "Y"
    Set Pause to "N"
    Set class to "full-frame"
    Modify the javascript variables below as needed
    /******************** CUSTOM TEXT ********************/

    // ******** WELCOME TITLE ******** //
    var custom_welcome_title = 'Welcome';

    // ******** WELCOME MESSAGE ******** //

    var custom_welcome_message = 'Please sign in below to view.';

    // ******** HINT TEXT ******** //

    var hint_text_first_name = 'First Name';

    var hint_text_last_name = 'Last Name';

    var hint_text_user_id = 'Email Address';

    // ******** BUTTON TEXT ****** //

    var hint_text_button_submit = 'Continue';

    var hint_text_button_skip = 'Skip';


    /********************** OPTIONS **********************/

    // value => true or false


    var persist_user_data = true;

    //FIRST NAME field

    var validateFirstName = true;

    //LAST NAME field present

    var validateLastName = true;

    //EMAIL field present

    var validateEmail = true;

    //SECONDARY SCREEN present

    var secondaryScreen = false;

    //SKIP BUTTON present

    var enableSkipBtn = true;


    var download_url = "";



    /*********************** COLORS **********************/

    // VALUES MUST BE FULL HEX CODE EX. => #db6327


    var annotation_background_color = 'rgba(0, 0, 0, 0.75)';


    var download_btn_color = false;


    //Set the behavior when a user submits their email address

    var autoPlayOnManualLogin=true;
    var seekOnManualLogin;

    //Set the automatic behavior when a user has already submitted their email address in a previous session

    var autoPlayOnAutoLogin = true;
    var seekOnAutoLogin;

    //Set the behavior of skip button

    var autoPlayOnSkip = true;
    var seekOnSkip;


  <link href='//' rel='stylesheet' type='text/css'>
  <link type="text/css" rel="stylesheet" href="//">
  <link rel="stylesheet" type="text/css" href="//" />


    .panel {
      background-color: none !important;
      background: none !important;

    body {
      background-color: rgba(0, 0, 0, 0.8);


<div id="signin-wrapper">
  <div class="container" style="display:none;width:720px;">
    <div class="row">
      <div class="heading-instructions">
          <h1 id="custom-welcome-title">Welcome</h1>
          <p id="custom-welcome-message">Please sign in to continue watching.</p>
    <div id="loginbox" style="margin-top:10px;" class="mainbox col-md-12 col-sm-12">
      <div class="panel panel-info" >
        <div class="panel-heading">
          <div class="panel-title">Sign In</div>
        <div class="panel-body" >
          <form id="loginform" class="form-horizontal" role="form">
            <div class="row row-margin" id="name-container">
              <div class="col-xs-6" id="first-name">
                <input id="login-first-name" type="text" class="form-control" name="username" placeholder="First Name">
              <div class="col-xs-6" id="last-name">
                <input id="login-last-name" type="text" class="form-control" name="username" placeholder="Last Name">
            <div class="row">
              <div class="col-xs-12">
                  <div class="input-group">
                    <input id="login-username" type="text" class="display-inline form-control" name="username" placeholder="Email">
                    <div id="btn-login" class="display-inline btn-login btn-login">
                      <a id="btn-login-link" href='#' download=''>
            <div style="margin-top:10px" class="form-group">
              <div class="center-controls">
                <div class="controls">
                  <label style="font-weight:normal;margin-left:8px">
                    <input id="login-remember" type="checkbox" name="remember" value="1" checked> Remember me
          <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
  <div id="secondary-screen" style="width:720px;">">
    <div class="row">
      <div class="heading-instructions">
          Thank you for your continued viewing.
    <a href="//" download="executive_summary.pdf" id="pdf-download">
      <div id="download-btn" onclick="resumeVideo('manual')">
  <div id="skip" style="display:none" onclick="skipSignin()">
    <div id="skip-btn" class='show-inline'>
    <div class="ss-icon ss-fastforward show-inline">

<script src="//"></script>
<script type="text/javascript" src="//"></script>
<script type="text/javascript" src="//"></script>



Did this answer your question?