Sign in with Google button UX

Button rendering

A personalized button displays profile information for the first Google session that approves your website. An approved Google session has a corresponding account on your website who has signed in using Sign In With Google before.

If a personalized button is displayed, the user knows the following:

  • There's at least one active Google session.
  • There's a corresponding account on your website.

A personalized button gives users a quick indication of the session status, both on Google's side and on your website, before they click the button. This is especially helpful to end users who visit your website only occasionally. They may forget whether an account has been created or not, and in which way. A personalized button reminds them that Sign In With Google has been used before. Thus, it helps to prevent unnecessary duplicate account creation on your website.

To indicate the session status, the personalized button is displayed in the following ways:

  • One session: There's only one session on Google's side. That session approves the client, and there's a corresponding account on your website.

    A personalized button that displays the name of a single Google Account.

  • Multiple sessions: There are multiple sessions on Google's side. Those sessions approve the client. The approval is indicated by the list arrow next to the displayed account. At least one session has a corresponding account on your website.

    A personalized button with a list arrow.

  • No session: There's no session on Google's side, or none of the sessions have approved the client yet.

    A button that says 'Sign in with Google' without personalized information.

The personalized button is automatically displayed when the session status is suitable, unless your button settings don't allow the personalized button to be displayed. The personalized button is not displayed if:

  • The data-type attribute is icon.
  • The data-size attribute is set to medium or small.
  • The data-width attribute is set to a number smaller than 200px.

The name or email address is ellipsized when they are too long to be displayed inside the button.

A personalized button with ellipsized name and email.

Key user journeys

The user journeys vary based on the following statuses.

  • Session status on Google websites. The following terms are used to indicate different Google session status when the user journey starts.

    • Has-Google-session: There is at least one active session on Google websites.
    • No-Google-session: There is no active session on Google websites.
  • Whether the selected Google Account has approved your website when the user journey starts. The following terms are used to indicate different approval status.

    • New user: The selected account hasn't approved your website.
    • Returning user: The selected account has approved your website before.

Has-Google-session new user journey

  1. The Sign in with Google button.

    A button that says 'Sign in with Google' without personalized information.

  2. The account chooser page.

    Has-Initial-Session Account Chooser Page.

  3. The new user consent page.

    Sign In With Google button consent and sign-in.

  4. After the user confirms, an ID token is shared with your website.

Users can add a new Google session by clicking the Use another account button, refer to the No-Google-session user journeys, below.

Has-Google-session returning user journey

  1. The Sign in with Google button.

    A personalized button that displays the name of a single Google Account.

  2. The account chooser page.

    Google Account chooser

  3. After the user chooses a returning account, an ID token is shared with your website.

Users can add a new Google session by clicking the Use another account button, refer to the 'No-Google-session' user journeys, below.

No-Google-session new user journey

  1. The Sign in with Google button.

    A button that says 'Sign in with Google' without personalized information.

  2. The first page to add a new Google session.

    Google Account Email

  3. The second page to add a new Google session.

    Google Account sign-in

  4. The new user consent page.

    Sign In With Google button consent and sign-in.

  5. After the user confirms, an ID token is shared with your website.

No-Google-session returning user journey

  1. The Sign in with Google button.

    A button that says 'Sign in with Google' without personalized information.

  2. The first page to add a new Google session.

    Google Account Email

  3. The second page to add a new Google session.

    Google Account sign-in

  4. After the user clicks the Next button, an ID token is shared with your website.