Iframe Form Prefilling

In this guide, we’ll cover how to prefill form data such as first name, organization, etc.

What You’ll Build

In this tutorial you’ll prefill the SheerID verification form with data you already have about a user (name, email, organization, and more) so they don’t have to re-enter it, using the JavaScript library.

Prerequisites

A published verification program and its programId (create one in MySheerID).
The SheerID JavaScript library installed — see JavaScript Library.

Overview

At times you may already know some of your customer’s information such as first and last name, email address, or other information. Rather than asking the user to enter this data into the SheerID Verification Form again, you can prefill fields. This makes it easier and faster for your customer to fill in the form and proceed, resulting in higher conversion rates.

Installation

There are a few different ways to install SheerID’s form on your web page. This tutorial applies to Inline iframe and Modal install methods.

See Publish Program for more information on the different installation techniques.

Inline iframe

Prefilling form data using the Inline iframe installation method

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sheerid/jslib@2/sheerid-install.css" type="text/css" />

<div id="my-container"></div>
<script type="module">
  import sheerId from "https://cdn.jsdelivr.net/npm/@sheerid/jslib@2/sheerid-install.js"

  // sheerId.loadInlineIframe returns an object which can be assigned to a variable such as `myFrame`
  const myFrame = sheerId.loadInlineIframe(
    document.getElementById("my-container"),
    "https://services.sheerid.com/verify/YOUR_PROGRAM_ID/"
  )
  // Now you can call `setViewModel()` and specify all or part of a viewModel object:
  myFrame.setViewModel({
    firstName: "Jane",
    lastName: "Doe",
  })
</script>

See a live example here.

Prefilling form data using the Load In Modal installation method.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sheerid/jslib@2/sheerid-install.css" type="text/css" />

<a id="verificationTrigger">Confirm Eligibility</a>

<script type="module">
  import sheerId from "https://cdn.jsdelivr.net/npm/@sheerid/jslib@2/sheerid-install.js"
  function displayVerification() {
    const myFrame = sheerId.loadInModal(
      "https://services.sheerid.com/verify/YOUR_PROGRAM_ID/",
      {
        mobileRedirect: false,
      }
    )

    myFrame.setViewModel({
      firstName: "Jane",
      lastName: "Doe",
    })
  }

  document
    .getElementById("verificationTrigger")
    .addEventListener("click", displayVerification)
</script>

See a live example here.

View Models

The fields you can provide will vary based on your Program’s Segment (e.g. student, teacher, etc) and sometimes based on features you may have enabled.

The most commonly prefilled fields are firstName, lastName, email, birthDate, and organization. For the exact fields each segment accepts, see the Required Fields reference and the REST API Reference.

Next Steps

JavaScript Library — full library reference and options.
Embedded Iframe — render the prefilled form inline.