Iframe Form Prefilling

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

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.