Brand Assets
Brand Assets

Brand Guidelines

These guidelines outline the general rules when using ID.me’s brand assets. You may only use the approved brand assets that are provided on this page. Consistent use of these assets helps people easily recognize references to ID.me and bring trust to every transaction. ID.me may suspend your application’s access to our services if these guidelines are not followed.

ID.me Button

Displaying these on your homepage, products and promotional pages is a great way to reassure your customers that their personal information is safe and that their identity information will be handled securely.

For all customer integrations, ID.me requires its branded Verification and Sign In buttons to be implemented as accessible, HTML-coded buttons with corresponding ARIA roles, attributes, and states.

Usage

Verify with ID.me

The “Verify with ID.me” button provides a pathway to invoke ID.me’s identity and community verification solution. This ensures a consistent design experience for ID.me’s members and customers.

Save the image

Signin with ID.me

The “Sign in with ID.me button” can be used to enable single-sign-on (SSO) integrations. Identity or community verification flows can also be activated subsequent to SSO.

Save the image

Approved formats

Standard button guidelines

Using the standard versions of the ID.me button on your site will trigger an immediate association for users. ID.me will, on a case by case basis, review and approve deviations from the above-described standard versions.

Standard button allows for flexibility

It is powerful on its own and is equally present alongside other call to actions

Accessibility for all

Our button is synonomous to our brand and meets ‘AA’ Color Contrast standard for easy identification

A symbol of trust

The “tick” icon has dual meaning–it represents our commitment to safeguard personal information and evokes trust

ID.me Logo

Consistent use of our logo is essential to brand recognition

Rectangle-shaped button

Pill-shaped button

Improper formats

Example 1 of 4

Improper contrast for text and logo (Doesn’t pass 508 ‘AA’ color contrast) Misrepresentation of ID.me standard button (wrong green; excessive rounded corner radius)

Example 2 of 4

Low contrast between button text and background color Sharp edges make it appear less like a button

Example 3 of 4

Improper font style Not approved color Incorrect logo presentation (stretched horizontally)

Example 4 of 4

Low contrast between button text and background color Improper spacing between text and logo Gray color makes the button appear inactive

ID.me button widget

Code Snippet

The following code snippet can be used to add the ID.me button widget to your app. This widget only supports a full page redirect to the authorization endpoint.

<span
  id="idme-wallet-button"
  data-scope="military,responder,student,teacher,government"
  data-client-id="[YOUR_CLIENT_ID]"
  data-redirect="[YOUR_REDIRECT_URI]"
  data-response="code"
  data-text="[AFFINITY GROUP] receives [OFFER] with ID.me"
  data-show-verify="true">
</span>
<script src="https://s3.amazonaws.com/idme/developer/idme-buttons/assets/js/idme-wallet-button.js"></script>
<span id="idme-wallet-button" data-scope="military,responder,student,teacher,government" data-client-id="[YOUR_CLIENT_ID]" data-redirect="[YOUR_REDIRECT_URI]" data-response="code" data-text="[AFFINITY GROUP] receives [OFFER] with ID.me" data-show-verify="true"> </span> <script src="https://s3.amazonaws.com/idme/developer/idme-buttons/assets/js/idme-wallet-button.js"></script>

Parameters

These parameters establish both necessary and adaptable configurations, empowering customers to align with ID.me brand guidelines, utilize the appropriate button for specific scenarios, and guide users seamlessly through subsequent steps.

Parameter Values Description Required
data-scope military,responder,student,teacher,government Defines the community you are requesting permission to access. Required
data-client-id [YOUR_CLIENT_ID] The client identifier received during app registration. It is automatically generated and can be found in your application dashboard. Required
data-redirect [YOUR_REDIRECT_URI] The url the user gets redirected to after authorizing an app. Set by the developer within the application dashboard. Required
data-response code or token The OAuth 2.0 grant type - Authorization Code (code) or Implicit (token). Required
data-text Example: Military members receive 10% off with ID.me A recommended parameter that displays a custom offer description within the ID.me Button Widget. Required if data-type="link"
data-logo [YOUR_LOGO_URL] A recommended parameter that displays a logo at the community selection page. Optional
data-hero [YOUR_HERO_IMAGE_URL] A recommended parameter that displays a hero image at the community selection page. Optional
data-state Example: 24730b6d A parameter to carry through any server-specific state you need to protect against CSRF issues. Optional
data-display popup or fullpage A recommended parameter that determines to user experience. Defaults to fullpage. Optional
data-show-verify true or false Displays the "Verification by ID.me" text. Defaults to false. Optional
data-app-id Example: SC529724439d8558619035353581 An Application Identifier, used to denote a unique application on the partner side Optional

Example Pop-up Redirect Page

The user will authenticate, verify and then authorize your app inside of the popup before being taken to the redirect URI. Our suggestion as this point is to handle the OAuth token response, close the popup and then refresh the parent window. Here is an example of a dummy page you could place at the redirect URI to achieve this.

Example Pop-up Redirect Page

The user will authenticate, verify and then authorize your app inside of the popup before being taken to the redirect URI. Our suggestion as this point is to handle the OAuth token response, close the popup and then refresh the parent window. Here is an example of a dummy page you could place at the redirect URI to achieve this.

<!-- This code snippet is not production quality -->
<html>
  <head>
   <script type="text/javascript">
     // Your application logic to handle the OAuth response

     window.opener.location.reload();
     window.close();
   </script>
  </head>
  <body></body>
</html>