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.


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="[email protected]/sheerid.css" type="text/css" crossorigin="anonymous" />
<script src="[email protected]/metrics.js" crossorigin="anonymous"></script>

Add the SheerID JavaScript library in the <body>.

<script src="[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

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>

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>
  function displayVerification() {
      '', {
        mobileRedirect: false,

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>
  function displayVerification() {
      '', {
    	mobileRedirect: true,
    	mobileThreshold: 320,
    	stopPropagation: true,
    	closeButtonText: 'Close!'

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.

Troubleshooting the Modal Display

The install snippet will automatically handle the modal height and width. This means the modal will automatically adjust to the consumer’s screen size and the height of the content.

If a customer adds a fixed height (eg by adding style="height:1400px;") it will break the way we calculate the height. Please do not try to make it fixed height. Here is a short video that illustrates this.

Scrolling problems with the modal? Things to try:

  1. As mentioned on this tutorialsheerid.css styles should be included on the <head> tag of the page. If they are inside a <body> tag, the page scrolling with modal open may break.

  2. Same for the sheerid.js file, it is being included at the top level of the <body> tag, not inside a <main> tag inside the body.

  3. If you’re still having trouble, work on modifying the iframe wrapper via CSS. This section highlights what class name you can use to modify the styles of the iframe. You could try changing styles on the sid-modal__wrapper class, to adjust the top position only when the header is affecting the height of the container.

  4. There is a known issue for Chrome in Windows 10 where the contents of the iFrame appear blurry when using border-radius on the iFrame. To fix this blurriness, add a css rule like this on the install page (the page that loads the iFrame):

.sid-modal__iframe {
    border-radius: 0 !important;