Stay organized with collections
Save and categorize content based on your preferences.
Customizing the automatically rendered sign-in button (recommended)
To create a Google Sign-In button with custom settings, add
an element to contain the sign-in button to your sign-in page, write a function
that calls
signin2.render()
with your style and scope settings,
and include the https://apis.google.com/js/platform.js script
with the query string onload=YOUR_RENDER_FUNCTION.
The following is an example of a Google Sign-In button that specifies
custom style parameters:
The following HTML, JavaScript, and CSS code produces the button above:
You can build a Google Sign-In button to fit your site's design.
You must follow the branding guidelines and use
the appropriate colors and icons in your button. The branding guidelines also
provide icon assets that you can use to design your button. You must also
ensure that your button is as prominent as other third-party login options.
The following is an example of a Google Sign-In button built with a custom
graphic:
The following HTML, JavaScript, and CSS code produces the button above:
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-06-06 UTC."],[[["\u003cp\u003eThe Google Sign-In JavaScript library is deprecated; review the Deprecation and Sunset guide for migration details.\u003c/p\u003e\n"],["\u003cp\u003eYou can customize the appearance of the Google Sign-In button using the \u003ccode\u003esignin2.render()\u003c/code\u003e function with various style options.\u003c/p\u003e\n"],["\u003cp\u003eAlternatively, define \u003ccode\u003edata-\u003c/code\u003e attributes on a \u003ccode\u003ediv\u003c/code\u003e element with the class \u003ccode\u003eg-signin2\u003c/code\u003e for basic button customization.\u003c/p\u003e\n"],["\u003cp\u003eTo create a fully custom button, adhere to Google's branding guidelines, utilize provided assets, and ensure prominence comparable to other login options.\u003c/p\u003e\n"],["\u003cp\u003eFedCM APIs will be required for the Google Sign-In library, so conduct an impact assessment to ensure continued functionality.\u003c/p\u003e\n"]]],[],null,["| **Warning:** The Google Sign-In library optionally uses FedCM APIs, and their use will become a requirement. [Conduct an impact assessment](/identity/sign-in/web/gsi-with-fedcm) to confirm that user sign-in continues to function as expected. \n|\n| Support for the Google Sign-In library is deprecated, see the [Deprecation and Sunset](/identity/sign-in/web/deprecation-and-sunset) guide for more.\n\nCustomizing the automatically rendered sign-in button (recommended)\n\nTo create a Google Sign-In button with custom settings, add\nan element to contain the sign-in button to your sign-in page, write a function\nthat calls\n[`signin2.render()`](/identity/sign-in/web/reference#gapisignin2renderid_options)\nwith your style and scope settings,\nand include the `https://apis.google.com/js/platform.js` script\nwith the query string `onload=YOUR_RENDER_FUNCTION`.\n\nThe following is an example of a Google Sign-In button that specifies\ncustom style parameters:\n\nThe following HTML, JavaScript, and CSS code produces the button above: \n\n```gdscript\n\u003chtml\u003e\n\u003chead\u003e\n \u003cmeta name=\"google-signin-client_id\" content=\"YOUR_CLIENT_ID.apps.googleusercontent.com\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n \u003cdiv id=\"my-signin2\"\u003e\u003c/div\u003e\n \u003cscript\u003e\n function onSuccess(googleUser) {\n console.log('Logged in as: ' + googleUser.getBasicProfile().getName());\n }\n function onFailure(error) {\n console.log(error);\n }\n function renderButton() {\n gapi.signin2.render('my-signin2', {\n 'scope': 'profile email',\n 'width': 240,\n 'height': 50,\n 'longtitle': true,\n 'theme': 'dark',\n 'onsuccess': onSuccess,\n 'onfailure': onFailure\n });\n }\n \u003c/script\u003e\n\n \u003cscript src=\"https://apis.google.com/js/platform.js?onload=renderButton\" async defer\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou can also specify settings for a custom Google Sign-In button by defining\n`data-` attributes to a `div` element with the class `g-signin2`. For example: \n\n \u003cdiv class=\"g-signin2\" data-width=\"300\" data-height=\"200\" data-longtitle=\"true\"\u003e\n\nBuilding a button with a custom graphic\n\nYou can build a Google Sign-In button to fit your site's design.\nYou must follow the [branding guidelines](/identity/branding-guidelines) and use\nthe appropriate colors and icons in your button. The branding guidelines also\nprovide icon assets that you can use to design your button. You must also\nensure that your button is as prominent as other third-party login options.\n\nThe following is an example of a Google Sign-In button built with a custom\ngraphic:\n\nThe following HTML, JavaScript, and CSS code produces the button above: \n\n```gdscript\n\u003chtml\u003e\n\u003chead\u003e\n \u003clink href=\"https://fonts.googleapis.com/css?family=Roboto\" rel=\"stylesheet\" type=\"text/css\"\u003e\n \u003cscript src=\"https://apis.google.com/js/api:client.js\"\u003e\u003c/script\u003e\n \u003cscript\u003e\n var googleUser = {};\n var startApp = function() {\n gapi.load('auth2', function(){\n // Retrieve the singleton for the GoogleAuth library and set up the client.\n auth2 = gapi.auth2.init({\n client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',\n cookiepolicy: 'single_host_origin',\n // Request scopes in addition to 'profile' and 'email'\n //scope: 'additional_scope'\n });\n attachSignin(document.getElementById('customBtn'));\n });\n };\n\n function attachSignin(element) {\n console.log(element.id);\n auth2.attachClickHandler(element, {},\n function(googleUser) {\n document.getElementById('name').innerText = \"Signed in: \" +\n googleUser.getBasicProfile().getName();\n }, function(error) {\n alert(JSON.stringify(error, undefined, 2));\n });\n }\n \u003c/script\u003e\n \u003cstyle type=\"text/css\"\u003e\n #customBtn {\n display: inline-block;\n background: white;\n color: #444;\n width: 190px;\n border-radius: 5px;\n border: thin solid #888;\n box-shadow: 1px 1px 1px grey;\n white-space: nowrap;\n }\n #customBtn:hover {\n cursor: pointer;\n }\n span.label {\n font-family: serif;\n font-weight: normal;\n }\n span.icon {\n background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;\n display: inline-block;\n vertical-align: middle;\n width: 42px;\n height: 42px;\n }\n span.buttonText {\n display: inline-block;\n vertical-align: middle;\n padding-left: 42px;\n padding-right: 42px;\n font-size: 14px;\n font-weight: bold;\n /* Use the Roboto font that is loaded in the \u003chead\u003e */\n font-family: 'Roboto', sans-serif;\n }\n \u003c/style\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003c!-- In the callback, you would hide the gSignInWrapper element on a\n successful sign in --\u003e\n \u003cdiv id=\"gSignInWrapper\"\u003e\n \u003cspan class=\"label\"\u003eSign in with:\u003c/span\u003e\n \u003cdiv id=\"customBtn\" class=\"customGPlusSignIn\"\u003e\n \u003cspan class=\"icon\"\u003e\u003c/span\u003e\n \u003cspan class=\"buttonText\"\u003eGoogle\u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"name\"\u003e\u003c/div\u003e\n \u003cscript\u003estartApp();\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```"]]