Understand Personalized Button

Stay organized with collections Save and categorize content based on your preferences.

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 via 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' with no personalized information.

The personalized button will be automatically displayed when the session status is suitable, unless your button settings don't allow the personalized button to be displayed. Currently, the personalized button won't display 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 will be ellipsized when they are too long to be displayed inside the button.

A personalized button with ellipsized name and email.