Javascript Library Iframe Scripts

In this guide, we’ll go through the display options and features of the iframe installation scripts in our Javascript API. The end result is a verification form which displays as you prefer and takes advantage of the customization options we offer.

Overview

The SheerID JavaScript Library is at once a client for the SheerID REST API, an engine for rendering verification forms on your site, and a data collection tool for your verification programs. With it, you have full control over the appearance of the verification forms on your site. This guide assumes you created an account at MySheerID, and would like to use our Javascript Library to render a verification form.

Install script

The Display Method scripts below assume that you have the SheerID JavaScript library installed on the page which launches your verification form. Install the JavaScript library using a script tag, calling the library from a CDN.

Add the following to the <head> of your html file.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sheerid/[email protected]/sheerid.css" type="text/css" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/@sheerid/[email protected]/metrics.js" crossorigin="anonymous"></script>

Add the SheerID JavaScript library in the <body>.

<script src="https://cdn.jsdelivr.net/npm/@sheerid/[email protected]/sheerid.js" crossorigin="anonymous"></script>

Program Id

To use the scripts below you will need to insert your programId into the URL. Retrieve your programId from your Program tab in MySheerID. The URL format is https://services.sheerid.com/verify/YOUR_PROGRAM_ID/

Display methods

There are two methods to display a verification form. Choose which fits the best with the user experience of your website.

Inline iframe

Choose loadInlineIframe to render your form within an iframe. The iframe is created inside an element that you specify through an id. In this example the id=“my-container”:

<div id="my-container"></div>
<script>
  sheerId.loadInlineIframe(
    document.getElementById('my-container'),
    'https://services.sheerid.com/verify/YOUR_PROGRAM_ID/',
  );
</script>

Install Inline Iframe

Choose loadInModal to render your form inside a modal element. Provide a button or element which when clicked triggers opening the modal containing the verification iframe. In this example a button with the label “Confirm Eligibility” launches the form.

<a onclick="displayVerification()">Confirm Eligibility</a>
<script>
  function displayVerification() {
    sheerId.loadInModal(
      'https://services.sheerid.com/verify/YOUR_PROGRAM_ID/', {
        mobileRedirect: false,
      });
  }
</script>

Install Modal

The modal script above supports several configuration keys which can be added to customize the modal’s behavior. This table summarizes the options:

Key Required? Default value Description
mobileRedirect No false Set this value to true and add a mobileThreshold to bypass using a modal if the user’s screen width is below the mobileThreshold. This improves the user experience on mobile devices.
mobileThreshold No 620 Combine with mobileRedirect to set when the modal is dismissed. Screen widths below this value will not use a modal and redirect the user to verification URL.
stopPropagation No false Set to true to prevent the modal click event from bubbling up the DOM.
closeButtonText No '' Use this to change the text for the close modal element.

This example shows a loadInModal script using all the available configuration keys:

<a onclick="displayVerification()">Confirm Eligibility</a>
<script>
  function displayVerification() {
    sheerId.loadInModal(
      'https://services.sheerid.com/verify/YOUR_PROGRAM_ID/', {
    	mobileRedirect: true,
    	mobileThreshold: 320,
    	stopPropagation: true,
    	closeButtonText: 'Close!'
  	});
  }
</script>

Customize using CSS

You can add or overwrite the styling of elements for either of the display methods shown above. Use this list of class names to create CSS selectors.

Class name Element Description
sid-inline-iframe <iframe> The element created of any verification rendered as an inline iframe. It is the <iframe> that it is being rendered.
sid-modal__wrapper <div> The wrapper of any verification rendered as a modal. It wraps the iframe and the close button.
sid-modal__iframe <iframe> It is the <iframe> that it is being created to render a verification. It is a child of the modal wrapper.
sid-modal__overlay <div> The overlay that is shown when the modal is open.
sid-modal__close-button <a> The element that will trigger closing the modal. As a default, it will only display the icon unless a closeButtonText parameter is provided through configuration.
sid-modal__close-text <span> If provided by configuration, the text for the close button.
sid-modal__close-icon <div> The elements that display the close icon. The icon can be customized changing the background-image property.