Skip to content
identvia Developers

Get started

Sign-in button

button.js turns a plain link into the official “Sign in with Identvia” button. It is 8 KB, makes no network requests, sets no cookies and works under a strict Content-Security-Policy.

Usage

HTML
<a class="identvia-btn" href="/login.php">Sign in with Identvia</a>

<script src="https://id.identvia.com/sdk/v1/button.js" async></script>

The link points at your login route, which starts the OpenID Connect flow on your server (see the PHP SDK). The script only changes how the link looks. Without JavaScript it is still a working link.

light (default) Sign in with Identvia Sign in with Identvia Sign in with Identvia
dark Sign in with Identvia Sign in with Identvia Sign in with Identvia
brand · pill · continue Continue with Identvia Sign up with Identvia
auto · icon · full width
Sign in with IdentviaSign in with IdentviaSign in with Identvia
Sign in with Identvia

Options

AttributeValuesDefault
data-themelight, dark, brand, auto (follows the visitor’s light/dark setting)light
data-sizesmall 32 px, medium 40 px, large 48 pxmedium
data-shaperect, rounded, pillrounded
data-textsignin, continue, signup, icon (mark only; the label stays available to screen readers)signin
data-widthfull, or a width in pixels from 120 to 400fits the label

Works on <a> (recommended) and <button>, for example inside a <form method="post">. Buttons added later can be rendered with IdentviaButton.render(element).

Content-Security-Policy

The script contains no inline code, never uses eval or innerHTML, and builds the logo with DOM APIs, so it also works with Trusted Types. Allow the script from Identvia:

HTTP header
Content-Security-Policy: script-src 'self' https://id.identvia.com; style-src 'self' https://id.identvia.com

Styles are applied with a constructable stylesheet, which strict style-src policies allow. Older browsers without that feature load https://id.identvia.com/sdk/v1/button.css instead, which is why the issuer is in style-src. You can also link that stylesheet yourself and skip the script; you just won’t get the logo.

Subresource Integrity: the file at /sdk/v1/ gets compatible fixes. If you need an integrity hash, copy button.js to your own server and update it when we announce a release.

Accessibility

  • Text and background contrast meet WCAG AA in every theme; the focus ring is visible on light and dark pages.
  • Icon-only buttons get an aria-label. The logo is hidden from assistive technology.
  • Windows High Contrast and other forced-colour modes use system colours.
  • Keep the label in your link even when using data-text: it’s what people see if the script is blocked.

Before you change the button’s look, read the brand guidelines.