Skip to main content

Adding a Login Page

After an application is onboarded, a web snippet is provisioned. This snippet uses the Browser SDK downloaded in the previous topic. It's now time to write your login page.

Create a login.html file

The login.html page will prompt the user for their login credentials while performing collection.

Include the Browser SDK in the login page

The login.html page will include the Browser SDK in the <head> of the page. The Browser SDK uses the given snippet hostname and snippet ID to load the dynamic components of the SDK.

Add the following code to the login.html page:

<html>

<head>
  <script src='static/adaptive-v1.min.js'></script>
  <script>
    // The snippet host and snippet ID were provided when you onboarded your application.
    startAdaptiveV1('<snippet host>', '<snippet ID>');
  </script>
</head>

<body>
  <h1>Login</h1>
  <form name='login' action='/login' method='POST'>

    <label for='username'>Username:</label><br>
    <input type='email' id='username' name='username'><br>

    <label for='password'>Password:</label><br>
    <input type='password' id='password' name='password'><br>

    <input type='submit' value='Submit'>
  </form>
</body>

</html>

Warning: The Browser SDK should not be invoked on pages which are not the login page or re-collection page. Running collection on other pages may cause unexpected behavior.

Note: You should replace '<snippet host>' and '<snippet ID>' with the snippet hostname and ID you received from application onboarding.

For a guide on how to install the Browser SDK and set up your development environment, see Setting Up Your Environment.


Next: Ensuring Collection Completes

Previous: Setting Up Your Environment