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 MedallionWhen 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:
- Using the Get Medallion Verification Link Status API
- Listening for the
SELF_VERIFICATION_TRY_STATUS
event in Webhook Events
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>
Updated 20 days ago