Get Started With ID and Passport Scanning for Web

How would you implement passport and ID scanning on your website? It used to mean complex software integration and weeks of testing. Now, you can quickly enable custom-branded ID scanning with ID Bolt and the ID Bolt Studio.

Creating a brilliant ID scanning experience on the web results in higher completion rates. These directly translate to improved business metrics such as the number of customers arriving at the airport ready to fly.

But achieving this requires a customizable interface that supports whitelabelling, internationalization, and web accessibility standards. This is where the ID Bolt Studio helps. The easy-to-use dashboard allows you to experiment with brand styling and workflows before deploying an auto-generated code snippet directly to your website.

In this blog and video, I’ll walk through configuring and deploying web-based ID and passport scanning with the ID Bolt Studio, using an example airline site.

What is ID Bolt?

Scandit’s ID Bolt is a pre-built, secure ID scanning solution for any website, enabling instant scanning of passports, driver’s licenses, ID cards, and other forms of identification. It’s designed to reduce your deployment time, improve customer experience, and meet WCAG accessibility standards, without compromising data collection and regulatory requirements.

30-day free trial

Fast, foolproof, secure ID scanning for web

Try ID Bolt

How does the ID Bolt Studio help?

With the ID Bolt Studio, you can quickly and easily apply your desired scanning workflows and brand to ID Bolt. Test different configurations and whitelabeling options directly in your Scandit dashboard, then copy working code to your website.

Here are the features you can configure using the ID Bolt Studio:

ID Bolt feature	Description
Identity Document Configuration	Define the ID document types you want to accept, any explicit exclusions, and document validation rules. ID Bolt supports over 100 regions worldwide.
App Settings	Customize language and locale, scanning mode (single side or full document), return data format, anonymization settings, and workflow screens.
Customize User Interface	Customize how ID Bolt’s UI looks by switching color, font, images, and CSS options to match your brand.
Advanced Options	Customize ID Bolt to enhance the user experience and tracking, such as enabling an external transaction ID and ID Bolt keep alive settings.

Ready to try the ID Bolt Studio? Let’s walk through an airline example.

ID Bolt Studio walk-through

Let’s say I work for an airline that accepts any passport valid for at least six months, but no other identity documents.

My website looks like the screenshot below, and I have four branding guidelines that the ID Bolt pop-up and phone experiences must match:

• Primary color: #007887
• Primary font color: #111827
• Secondary font color: #6B7280
• Font family: Montserrat

Pre-requisites

• A valid ID Bolt license key. (If you don’t have one, go to Scandit dashboard > Configuration > License Key, and click Generate a license key.)
• ID Bolt has been installed as a dependency to my website. (For instructions on how to do this, read How to Add a JavaScript Passport or ID Scanner to Web Apps.)
• Brand font files in WOFF2, WOFF, TTF, or OTF format. The maximum file size is 100 KB.
• Brand logo file (if required) in PNG, JPEG, SVG, or WebP format. The maximum image size is 50 KB.

After logging into my Scandit dashboard and selecting Configuration from the left-hand navigation, I see something like this:

In addition to the settings for ID Bolt’s features, I get:

• Preview: To see how your ID Bolt customizations will look before deploying them to production.
• Launch Code: JavaScript code you can copy and paste into your website.
• Launch ID Bolt: Open a live instance of ID Bolt to test your customizations with real documents, before deploying them to production.

1. Define allowed ID document types

1. Under Identity Document Configuration, I’m going to deselect all document types. Then, using the drop-down, I’ll select Canada - Passport, United States of America - Passport, and Any - Driver’s License. You can use the search feature for quicker access.
2. Under Validation Rules, I’ll select Must be valid for at least and enter 6 in the Months field.

2. Customize user interface

1. Under Fonts, I’ll click Change Font to upload my font files, and repeat this step for all font weights.
2. Under Customize User Interface > Colors, I’m going to set the following fields to the given values:
   a. Primary: #007887
   b. Image: #007887
   c. Text Primary: #111827
   d. Text Secondary: #6B7280
3. To change the link color, I’ll update the CSS by navigating to CSS Styles, enabling Link Style, and entering the following code:

   .bolt-link {
   	color: #007887;
   	font-weight: 600;
   } 

3. Test new configuration

1. To see an updated preview, I can click on the Desktop or Mobile buttons under Preview. The instruction text and colors are updated to match my settings.
2. To try the new configuration in a live ID Bolt session, complete with a modal dialog to scan a real ID, I can click Launch ID Bolt. If you select Scan by phone, your phone experience will also match the customizations defined above.

   

3. If you click Show all data on the dashboard, you will get a dialog containing a copyable data structure of the scanned ID card’s data and images of the scan.

4. Add the new configuration to your website

Once I’m satisfied with the new configuration, I’ll copy the code under Launch Code and add it to the startIDBolt() method in my website application code.

And that’s it! Custom-branded ID scanning on your website in just a few minutes.

AI-powered configuration coming soon

Things are about to get even easier. With the AI theme generator we’re working on, you’ll be able just to provide the ID Bolt Studio with a URL. The AI theme generator analyzes your website and applies brand colors, fonts, and style immediately to ID Bolt’s configuration code.

You get the correct branded experience instantly, with no manual configuration needed.

That’s all it takes to create a branded and accessible ID scanning experience for everyone. Ready to try it yourself? Get a free 30-day ID Bolt trial and you’ll be scanning IDs in no time.

Learn more

Blog post

ID Documents Are Messy: How AI-Powered Identity Verification Understands Them

Blog post

How to Choose Identity Verification Software for Your Business

Blog post

Advance Passenger Information Compliance for Airlines Investigated