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 //hapyak_demos.s3.amazonaws.com/widgets/sign-in/custom/default_fullframe/full_screen_signin.htm. 
  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>
<html>
<head>
  <meta charset="utf-8">
  <title>Sign In</title>
  <script>
    /***********************
    Settings:
    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

    //PERSIST USER DATA

    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;

    //DOWNLOAD URL

    var download_url = "";

    // https://hapyak_demos.s3.amazonaws.com/img/hapyak_infographic.pdf

    /*******************************************************/

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

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

    //ANNOTATION BACKGROUND COLOR

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

    //SUBMIT BUTTON COLOR

    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;

  </script>

  <link href='//hapyak_demos.s3.amazonaws.com/widgets/sign-in/custom/default_fullframe/full_screen_signin.css' rel='stylesheet' type='text/css'>
  <link type="text/css" rel="stylesheet" href="//storage.googleapis.com/hapyak-assets/symbolset/ss-symbolicons-block.css">
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

  <style>

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

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

  </style>
</head>

<body>
<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>
    </div>
    <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>
        <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>
              <div class="col-xs-6" id="last-name">
                <input id="login-last-name" type="text" class="form-control" name="username" placeholder="Last Name">
              </div>
            </div>
            <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=''>
                        Continue
                      </a>
                    </div>
                  </div>
              </div>
            </div>
            <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
                  </label>
                </div>
              </div>
            </div>
          </form>
          <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="secondary-screen" style="width:720px;">">
    <div class="row">
      <div class="heading-instructions">
          Thank you for your continued viewing.
      </div>
    </div>
    <a href="//hapyak_demos.s3.amazonaws.com/widgets/pdf/hapyak_infographic.pdf" download="executive_summary.pdf" id="pdf-download">
      <div id="download-btn" onclick="resumeVideo('manual')">
        Download
      </div>
    </a>
  </div>
  <div id="skip" style="display:none" onclick="skipSignin()">
    <div id="skip-btn" class='show-inline'>
      Skip
    </div>
    <div class="ss-icon ss-fastforward show-inline">
    </div>
  </div>
</div>

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak-iframe.js"></script>
<script type="text/javascript" src="//hapyak_demos.s3.amazonaws.com/widgets/sign-in/custom/default_fullframe/full_screen_signin.js"></script>

</body>

</html>

Did this answer your question?