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.
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.
No session: There's no session on Google's side, or none of the sessions have approved the client yet.
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 isicon
. - The
data-size
attribute is set tomedium
orsmall
. - 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.
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
The Sign in with Google button.
The account chooser page.
The new user consent page.
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
The Sign in with Google button.
The account chooser page.
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
The Sign in with Google button.
The first page to add a new Google session.
The second page to add a new Google session.
The new user consent page.
After the user confirms, an ID token is shared with your website.
No-Google-session returning user journey
The Sign in with Google button.
The first page to add a new Google session.
The second page to add a new Google session.
After the user clicks the Next button, an ID token is shared with your website.