Embed within an IFrame

Overview

Medallion can be used within your application, without the end-user having to leave your platform by embedding the Medallion Link within an IFrame.

🗒️

Government ID Verification via Medallion

When embedding Medallion into an IFrame, ensure that the Medallion link is opened only on a mobile device if you plan to perform Government ID Verification.

Government ID Verification via Medallion on Desktop is not supported.

You can check the status an on going verification in the following ways:

Best Practices

Below are the best practices to be followed when embedding Medallion within an IFrame.

Government ID Verification

Best practices to be followed when Government ID Verification is enabled in the workflow.

Camera Preview on supported devices

The camera preview by default will fill the width of the screen preserving a 4:3 aspect ratio. It's possible to customize the camera dimensions but if these do not adhere to the aspect ratio, one dimensions will be overridden.

IFrame Styling

Use the below CSS style base when using the IFrame on a mobile device.

  iframe {
    border: 0 !important;
    height: 100%;
    width: 100% !important;
  }
  .iframe-content {
    height: auto;
  }

  @media only screen and (max-width: 600px) {
    iframe {
    height: 100%;
    }
    .iframe-content {
    height: 96%;
    }
  }

Camera and Fullscreen Permissions for IFrame Integration

When integrating Medallion within an IFrame, it is imperative to explicitly grant the necessary permissions to ensure a seamless and secure user experience—particularly for workflows requiring camera access, such as Government ID Verification.

Modern browsers enforce strict security policies that restrict access to device features, including the camera, for content embedded within IFrames. Without the appropriate permissions, users may be unable to grant camera access, resulting in unsuccessful or incomplete verifications.

Required IFrame Attribute

To enable camera functionality and fullscreen display, include the allow attribute in your IFrame tag, specifying both fullscreen and camera permissions for the Medallion domain.

Example:

<iframe
  src="https://verify.authenticating.com/?token={{VERIFICATION_TOKEN}}"
  allow="fullscreen; camera https://verify.authenticating.com;"
  ...
></iframe>