Modal Form

What You’ll Build

In this tutorial you’ll launch the SheerID verification form in a lightbox modal from a button on your site, using the JavaScript library’s loadInModal method.

Prerequisites

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

Add the modal

The first, and simplest option for rendering a form on your site is to include the Install Snippet from the Publish step in the page where you would like the offer to be available. The following example code renders this: Confirm Eligibility button. Try it out!

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

<button id="displayVerification">Confirm Eligibility</button>
<script type="module">
  import sheerId from "https://cdn.jsdelivr.net/npm/@sheerid/jslib@2/sheerid-install.js"

  document
    .getElementById("displayVerification")
    .addEventListener("click", () => {
      const verificationUrl =
        "https://services.sheerid.com/verify/62856b5af125ee46cfd7a1b2/"
      sheerId.loadInModal(verificationUrl, {
        mobileRedirect: true,
      })
    })
</script>

Use this option to tag a button or a link on a page you host; clicking the button will open a modal lightbox with the verification form:

See Embedded Iframe to see how to embed the form in the page without using the lightbox modal.

Next Steps

• Embedded Iframe — render the form inline instead of in a modal.
• JavaScript Library — install and configure the library.