Create buttons for 'Signing in with DID.app'

Here at DID.app we are releasing our logos into the wild so you can create custom 'Sign in with DID.app' buttons on your (undoubtedly excellent) website.

This is a super-quick guide to adding custom buttons to your website.

Head over to the brand resource guidelines page. There you will find all our logo images and our icon images too.
You can copy and paste an example button. Here are a few examples to choose from (feel free to design your own too):

A light button that can be used on most pages:

<div style="display:inline-block;padding:0.3em;border:1px solid gray;margin:1em;border-radius:4px;">
  <span style="display:flex;align-items:center;">
    <img src="/icon.svg" style="height:30px">
    <span style="padding:0 1rem;">Sign in with DID.app</span>
  </span>
</div>

A block style button:

<div style="display:inline-block;padding:0.3em;margin:1em;background:#00dfc0;color:white;">
  <span style="display:flex;align-items:center;">
    <img src="/logo.svg#light-mono" style="height:30px">
    <span style="padding:0 1rem;font-weight:bold;white-space:nowrap;">Sign in</span>
  </span>
</div>

A dark sign in button:

<div style="display:inline-block;padding:0.3em;margin:1em;background:#2a454e;color:white;">
  <span style="display:flex;align-items:center;">
    <img src="/logo.svg#light" style="height:30px">
    <span style="padding:0 1rem;font-weight:bold;white-space:nowrap;">Sign in</span>
  </span>
</div>

An icon only button:

<img src="/icon.svg#light-mono" style="height:40px;background:#00dfc0;padding:0.5em;border-radius:1em;">

To turn the image into a button that triggers the authentication flow you can create a form and add your button into the html tag that handles submission.
Here's an example from DID.app's Step By Step Integration guide.

<form action="https://auth.did.app/oidc/authorize" method="get">
  <input name="client_id" value="[CLIENT_ID]" type="hidden" />
  <input name="redirect_uri" value="[REDIRECT_URI]" type="hidden" />
  <input name="response_mode" value="form_post" type="hidden" />

  <button type="submit">Sign in</button>
</form>

Feel free to reach out to me if you have any questions about our custom buttons. I can be found by emailing team@did.app

Blog

Create buttons for 'Signing in with DID.app'

Richard Shepherd

Join Our Newsletter. No Spam, Only the good stuff.

Related