Setup

Time to Complete	15 minutes
Skills Required	No technical skills!

tip

Complete this Setup guide before following the 1-Click Signup SDK Integration or API Integration guide.

1. Access the Dashboard.

Create or log into your Verified Dashboard account.

How to Create a Dashboard Account

a. Enter your email and click the 1-Click Login button.

We'll send you a verification code by email.

tip

Use your work email. We use AI to auto-magically set brand information based on your email domain, so you don't have to manually enter it!

b. Complete the verification step.

Click the verification button in the email or enter the verification code. We'll automatically log you in. It's a 1-click experience, as promised!

c. (optional) Set up MFA.

Set up multi-factor authentication with an authenticator app. This is optional until you request approval for Production access, at which point it's required.

d. (if necessary) Confirm your company name.

If you're creating the Dashboard account for your company, we'll ask you to confirm your company name. If someone on your team has already created your account, you won't need to do this.

If your account doesn't have a brand yet, we'll automatically create one for you and take you to its Brand Details page.

Why Multiple Brands?

Your company account can have one or more brands. Generally, you'll only need one brand, but there are some cases where it's helpful to use multiple. For example:

• If you have multiple products: If you have products that go by different names, it can be useful to create different brands to help users know which product they're using 1-Click Signup for — and to help your team track metrics specific to that product.
• If you want to try different brand settings: If you want to change brand settings without affecting your existing implementation (even in Sandbox), you can duplicate your brand and configure different settings on the new brand.

e. (optional) Invite team members.

Invite your team members to join your Dashboard account.

2. Configure brand settings.

On the Brands page, click the Create button to create a new brand, or click Brand Details to access brand settings for an existing brand.

Brand Name

Choose an external name for your brand. This will be used elsewhere in the Dashboard (for example on the Metrics page) and displayed to users in the SDK (if you choose to use the SDK).

The internal brand name is separate, and you can edit it at the top of the page. You can use this to label brands created for testing purposes, for example.

Integration Type

Choose how you'll integrate 1-Click Signup: with our SDK or our API.

We Strongly Recommend the SDK Integration Type

The SDK integration type is by far the easier option, and we strongly recommend using it. The SDK handles almost everything for you and is highly customizable, so you can use it to exactly match your branding and desired user experience. It implements our recommended user experience, which is hyper optimized from our experience verifying millions of users.

With the API integration type, you need to handle everything yourself, and you need approval from us to go live.

1-Click Signup Settings

Click the 1-Click Signup tab to access these settings.

Challenges

Manual Signup

Risk Signals

Default Credential Requests

Styling Settings

important

Styling settings only apply to 1-Click Signup using the SDK because they affect the user interface the SDK displays. (They also apply to Text to Signup.)

So, if you are only using 1-Click Signup with the the API, you can ignore these settings.

Verified Auto-Magically Configures Styling Settings

We use AI to auto-magically configure styling settings based on your email domain, so you don't have to do so manually from scratch!

Click the Styling tab to access these settings.

Choose how to style the SDK:

Setting	Options	Default	Description
Logo	Any square image (max size 200 KB, JPG or PNG)	-	Logo displayed to users
Alignment	Left Center Right Stretch	Center	Alignment used for most text, buttons, and the powered by Verified graphic
Font Family	Any Google font	Lato	Font used for all elements
1-Click Word	Signup Login Verify Apply Access AutoFill	Signup	Word that appears after "1-Click" in the powered by Verified graphic
Input Border Radius	Any number	4	Border radius used for all inputs
Button Border Radius	Any number	4	Border radius used for all buttons
Success Animation	Full None	Full	Whether to show the success animation
Primary Color	Any hex code	#0DBC3D	Color used for primary buttons and success indicators
Error Color	Any hex code	#EB0D28	Color used for errors
Muted Color	Any hex code	#BDBDBD	Color used for secondary buttons and text
Background Color	Any hex code	#FFFFFF	Color used for background
Graphic Color	Green Gray Black White	Green	Color of the Verified logo in the powered by Verified graphic
Advanced Styling	Custom JSON	-	Custom JSON configuration that allows fine-grained control over any SDK component styling, using the MUI theme system

The SDK Automatically Adjusts Text Color for Contrast

The SDK will automaticallly adjust the color of text to achieve good contrast, given the color of an element. For example:

• If you set Background Color to be dark, the SDK will adjust text on the background to be light.
• If you set Primary Color to be light, the SDK will adjust text on buttons to be dark.

Advanced Styling

The sections below give examples of how you can use custom code to style the SDK in more complex ways.

warning

It's up to you to ensure that custom code you use in the Advanced Styling setting works reliably — and to adapt it as needed for future versions of the SDK.

Wrapper

Update External SDK Wrapper

// In some style file that applies style to the wrapper of the parent element of the SDK
.sdk-iframe-container > iframe {
  padding: 2rem;
  margin: 2rem;
  max-width: 1000px;
}

Container

Change Container Padding

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "[data-testid=\"client-sdk-container\"]": {
            "padding": "2rem"
          }
        }
      }
    }
  }
}

Background

Make Background Transparent

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "&, & .MuiContainer-root > main > .MuiPaper-root": {
            "backgroundColor": "transparent"
          },
          "& [data-testid='phone-input-container'] label.MuiFormLabel-root": {
            "background": "transparent"
          },
          "& [data-testid='phone-input-container'] .MuiInputBase-root::before": {
            "opacity": 0
          },
          "& [data-testid='phone-input-container'] .MuiOutlinedInput-notchedOutline": {
            "border": "1px solid #ffffff",
            "zIndex": 0,
            "m": 0,
            "top": 0,
            "&::before": {
              "content": "none",
              "position": "relative",
              "inset": 0,
              "backgroundColor": "#ffffff",
              "zIndex": 0
            },
            "& legend": {
              "display": "block"
            }
          },
          "& [data-testid='phone-input-container'] .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
            "border": "1px solid #ffffff"
          },
          "& [data-testid='phone-input-container'] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
            "border": "1px solid #ffffff"
          }
        }
      }
    }
  }
}

Headers

Change Header Font Sizes

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "[data-testid=\"header\"] h2": {
            "font-size": "24px"
          },
          "[data-testid=\"header\"] #signin-instructions": {
            "font-size": "20px"
          },
          "[data-testid=\"header\"] #verification-instructions *": {
            "font-size": "20px"
          },
          "[data-testid=\"header\"] #form-instructions": {
            "font-size": "20px"
          },
          "[data-testid=\"header\"] #birthday-form-instructions": {
            "font-size": "20px"
          },
          "[data-testid=\"header\"] #ssn4-form-instructions": {
            "font-size": "20px"
          }
        }
      }
    }
  }
}

Buttons

Modify Confirm Button

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "[data-testid=\"confirm-button\"]": {
            "display": "block",
            "width": "100%",
            "box-shadow": "none !important"
          }
        }
      }
    }
  }
}

Modify Manual Signup Button

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "[data-testid=\"manual-signup-button\"]": {
            "display": "block",
            "width": "100%",
            "box-shadow": "none !important"
          }
        }
      }
    }
  }
}

Modify Edit Phone Button

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "[data-testid=\"edit-phone-button\"]": {
            "display": "block",
            "width": "100%",
            "box-shadow": "none !important"
          }
        }
      }
    }
  }
}

Modify Resend Code Button

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "[data-testid=\"resend-code-button\"]": {
            "display": "block",
            "width": "100%",
            "box-shadow": "none !important"
          }
        }
      }
    }
  }
}

Modify Edit Info Button

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "#credentials-region > div > button": {
            "display": "block",
            "width": "100%",
            "box-shadow": "none !important"
          }
        }
      }
    }
  }
}

Modify Open Help Modal Button

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "[data-testid=\"help-button\"]": {
            "display": "block",
            "width": "100%",
            "box-shadow": "none !important"
          }
        }
      }
    }
  }
}

Modify Close Help Modal Button

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "[data-testid=\"data-provider-dialog-close-button\"]": {
            "display": "block",
            "width": "100%",
            "box-shadow": "none !important"
          }
        }
      }
    }
  }
}

Success Animation

Hide Confetti

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "[data-testid=\"client-sdk-container\"] > main > div > div+div": {
            "display": "none"
          }
        }
      }
    }
  }
}

Hide Verified Checkmark

{
  "components": {
    "MuiCssBaseline": {
      "styleOverrides": {
        "body": {
          "[data-testid=\"step-success\"] > div": {
            "display": "none"
          }
        }
      }
    }
  }
}