> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.id.me/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.id.me/_mcp/server.

# Brand guidelines

> Rules and downloadable assets for using the IDMe brand, including the Dark Green, Black, and White logo variants and the Sign in with IDMe and Verify with IDMe buttons.

These guidelines outline the general rules required to use IDMe's brand assets. Consistent use of these assets helps people easily recognize references to IDMe and bring trust to every transaction.

> **Note**
>
> You may only use the approved brand assets that are provided on this page.
> IDMe may suspend your application's access to our services if these guidelines are not followed.

## Buttons

Displaying IDMe's button on your homepage, products, and promotional pages is a great way to show your customers that their personal information and identity is safe and will be handled securely.

There are two ways to add an IDMe button, and you can use whichever suits your application:

* [**Button widget**](#button-widget) is the recommended option. It renders and maintains the button for you, so your integration stays current.
* [**Button SVGs**](#button-svgs) are available to download and host yourself.

### Button widget

Add the widget by placing an `<idme-button>` element and the widget script on your page. The element reads its configuration from its attributes, and builds the IDMe authorize URL for you from the `data-` attributes.

Use `<idme-button-widget>` instead when you want the promotional widget, which wraps the button with a headline and category text.

One script serves both elements. Place the `<script>` tag above the button tag so the element is defined before the browser reaches it.

#### Code snippets

Choose the snippet that matches what you need:

* **Sign in** and **Verify** render the button on its own
* **Promotional widget** renders the same button wrapped in a headline, offer text, and community links

**`Sign in`**

```html Sign in
<script src="https://assets.id.me/widgets/button-widget/button.js"></script>

<idme-button
  variant="sign-in"
  color-variant="green"
  size="md"
  data-client-id="[YOUR_CLIENT_ID]"
  data-redirect="[YOUR_REDIRECT_URI]"
  data-response="code"
  data-scope="military">
</idme-button>
```

**`Verify`**

```html Verify
<script src="https://assets.id.me/widgets/button-widget/button.js"></script>

<idme-button
  variant="verify"
  color-variant="green"
  size="md"
  data-client-id="[YOUR_CLIENT_ID]"
  data-redirect="[YOUR_REDIRECT_URI]"
  data-response="code"
  data-scope="military">
</idme-button>
```

**`Promotional widget`**

```html Promotional widget
<script src="https://assets.id.me/widgets/button-widget/button.js"></script>

<idme-button-widget
  color-variant="green"
  size="md"
  headline="[AFFINITY GROUP] receives [OFFER] with IDMe"
  deal="20% off"
  category1="Military"
  category2="First Responders"
  more-categories="true"
  action-url="https://www.id.me/verify">
</idme-button-widget>
```

> **Note**
>
> A single `data-scope` routes to `api.id.me/oauth/authorize`. Multiple comma-separated scopes route to `groups.id.me` for group verification. The promotional widget does not read `data-` attributes, so give it a pre-built `action-url`.

> **Security**
>
> Load the script and your page over HTTPS, and include the script origin in your Content Security Policy `script-src`. Use only the documented attribute values, and do not build attributes from user-controlled input. Set `action-url` only to trusted IDMe URLs, and do not log or forward data from the `idme-button-click` and `idme-button-widget-click` events.

#### Parameters

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

##### Button appearance

These attributes control how `<idme-button>` looks and behaves.

| Parameter     | Values                                                | Description                                                                                                 | Required |
| ------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -------- |
| variant       | `sign-in` or `verify`                                 | Selects the button text                                                                                     | Yes      |
| color-variant | `green`, `green-outline`, `black`, or `black-outline` | Selects the button color                                                                                    | Yes      |
| size          | `xs`, `sm`, `md`, `lg`, or `xl`                       | Button size. Defaults to `md`.                                                                              | No       |
| verified      | Present, or `true`                                    | Shows the verified state                                                                                    | No       |
| disabled      | Present, or `true`                                    | Disables the button so it cannot be selected                                                                | No       |
| loading       | Present, or `true`                                    | Shows the loading state and replaces the label with `Verifying...`. Leading icons are hidden while loading. | No       |
| icon-leading  | A short text or emoji string                          | Displays the value before the button label. The value is inserted as text, so markup is not interpreted.    | No       |
| action-url    | A trusted IDMe URL                                    | The destination to navigate to when the button is selected. Takes precedence over every `data-` attribute.  | No       |
| target        | `_self` or `_blank`                                   | Where the destination opens. Defaults to `_self`. Ignored when `data-display` is `popup`.                   | No       |

##### Promotional widget

These attributes apply to `<idme-button-widget>`, which wraps the button with promotional text.

The widget passes `variant`, `color-variant`, `size`, `verified`, `disabled`, `loading`, `action-url`, and `target` through to the button it renders, with the same values as the table above. The one difference is that `color-variant` defaults to `green`. The attributes below are specific to the widget.

| Parameter       | Values                                                 | Description                                             | Required |
| --------------- | ------------------------------------------------------ | ------------------------------------------------------- | -------- |
| headline        | Example: \[AFFINITY GROUP] receives \[OFFER] with IDMe | The headline displayed above the button                 | No       |
| deal            | Example: 20% off, Exclusive offers                     | The offer text. Defaults to `Exclusive offers`.         | No       |
| category1       | Example: Military, Teachers                            | The first community named in the widget text            | No       |
| category2       | Example: First Responders, Nurses                      | The second community named in the widget text           | No       |
| more-categories | `true` or `false`                                      | Appends "and others" to the community list              | No       |
| text-size       | `sm` or `md`                                           | Size of the promotional text block                      | No       |
| button-align    | `center` or `top`                                      | Vertical alignment of the button against the text block | No       |
| text-align      | `left` or `right`                                      | Which side of the widget the text block sits on         | No       |
| border          | Present, or `true`                                     | Draws a border around the widget                        | No       |

> **Note**
>
> The promotional widget does not read `data-` attributes. Supply a pre-built `action-url` instead.

##### Building the URL from data attributes

As a drop-in replacement for the legacy widget, `<idme-button>` can build the IDMe authorize URL itself. Resolution precedence is `action-url`, then `data-hlp`, then `data-scope`. A single scope routes to `api.id.me/oauth/authorize`; multiple comma-separated scopes route to `groups.id.me`. Navigation is restricted to `id.me`, `www.id.me`, `api.id.me`, and `groups.id.me` to prevent open redirects.

| Parameter                | Values                                            | Description                                                                                                                           | Required |
| ------------------------ | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| data-scope               | military, responder, student, teacher, government | Defines the community you are requesting permission to access. A comma-separated list requests group verification.                    | Yes      |
| 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. | Yes      |
| data-redirect            | \[YOUR_REDIRECT_URI]                              | The URL the user gets redirected to after authorizing an app. Set by the developer within the application dashboard.                  | Yes      |
| data-response            | code or token                                     | The OAuth 2.0 grant type - Authorization Code (code) or Implicit (token)                                                              | Yes      |
| data-state               | Example: 24730b6d                                 | A parameter to carry through any server-specific state you need to protect against CSRF issues                                        | No       |
| data-display             | `popup`                                           | Opens the destination in a centered popup window. Overrides `target`, which is ignored while this is set.                             | No       |
| data-logo                | \[YOUR_LOGO_URL]                                  | Displays a logo at the community selection page                                                                                       | No       |
| data-hero                | \[YOUR_HERO_IMAGE_URL]                            | Displays a hero image at the community selection page                                                                                 | No       |
| data-country             | Example: US                                       | The country to use for the verification flow                                                                                          | No       |
| data-language            | Example: en                                       | The language to use for the verification flow, sent as `lang`                                                                         | No       |
| data-op                  | Example: signup                                   | The operation to start the flow with                                                                                                  | No       |
| data-type                | Example: link                                     | The presentation type passed through to the flow                                                                                      | No       |
| data-app-id              | Example: SC529724439d8558619035353581             | An Application Identifier, used to reference the IDMe-managed Application representing the partner's service                          | No       |
| data-hlp                 | A trusted IDMe URL                                | Overrides the built URL. Validated against the allowlist.                                                                             | No       |
| data-conversion-tracking | `true`, `false`, or a `window` function name      | Opts the button in to conversion tracking. See [Conversion Reporting](/guides/o-auth-2-0/conversion-reporting). Defaults to `false`.  | No       |

To read the resolved destination without navigating, call `getResolvedUrl()` on the element. The resolved URL is also included on the click event as `event.detail.url`.

#### Example popup redirect page

Users will authenticate, verify, and authorize your application inside the popup before being taken to the redirect URI.

**`Example`**

```html Example
<!-- 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>
```

> **Best practice**
>
> IDMe recommends that you handle the OAuth token response, close the popup, and then refresh the parent window

### Button SVGs

If you cannot use the button widget, the following button assets are available to download and host yourself.

Each button is available in three variants: low green with white type (recommended), white with black type, and black with white type.

#### "Sign in with IDMe" button

Use this button wherever people sign in to your application, whether you offer a single login option or several.

#### \*Recommended\* - Most recognizable

\


#### Additional options

\
\


Download SVGs

#### "Verify with IDMe" button

The "Verify with IDMe" button provides a pathway to invoke IDMe's identity and community verification solution. This ensures a consistent design experience for IDMe's members and customers.

#### \*Recommended\* - Most recognizable

\


#### Additional options

\
\


Download SVGs

#### "Verified by IDMe" state

Use this state to show that a member's verification is complete.

#### Verified by IDMe

\


Download SVGs

#### "Continue with IDMe" button

Use this button where people continue into your application with IDMe alongside other social login options.

#### \*Recommended\* - Most recognizable

\


#### Additional options

\
\


Download SVGs

## Logos

Bring trust to the community you wish to reach with the following IDMe logo tool kit.

Three logo variants are available for download. Dark Green (#032318) is the primary IDMe logo. Black (#000000) and White (#F7F7F7) are also available, for use on backgrounds where the primary logo does not provide enough contrast.

#### Dark Green

\#032318

\


#### Black

\#000000

\


#### White

\#F7F7F7

\


Download SVGs

### Logo checklist

Always ensure the following conditions are met when using the IDMe logo:

* The logo maintains the required clear space
* The logo is at least 85px by 30px
* The logo is dark green (#032318), black (#000000), or white (#F7F7F7)
* The logo must maintain co-equal prominence when displayed side-by-side