Google Sign In Website Using Custom Text

javascript jquery google-oauth google-signin

12,725

Solution 1

The platform.js library from google is rendering the button, along with the text.

In order to override it, you need to build your own custom button. From Google's example:

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  <script src="https://apis.google.com/js/api:client.js"></script>
  <script>
  var googleUser = {};
  var startApp = function() {
    gapi.load('auth2', function(){
      // Retrieve the singleton for the GoogleAuth library and set up the client.
      auth2 = gapi.auth2.init({
        client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
        cookiepolicy: 'single_host_origin',
        // Request scopes in addition to 'profile' and 'email'
        //scope: 'additional_scope'
      });
      attachSignin(document.getElementById('customBtn'));
    });
  };

  function attachSignin(element) {
    console.log(element.id);
    auth2.attachClickHandler(element, {},
        function(googleUser) {
          document.getElementById('name').innerText = "Signed in: " +
              googleUser.getBasicProfile().getName();
        }, function(error) {
          alert(JSON.stringify(error, undefined, 2));
        });
  }
  </script>
  <style type="text/css">
    #customBtn {
      display: inline-block;
      background: #4285f4;
      color: white;
      width: 190px;
      border-radius: 5px;
      white-space: nowrap;
    }
    #customBtn:hover {
      cursor: pointer;
    }
    span.label {
      font-weight: bold;
    }
    span.icon {
      background: url('{{path to your button image}}') transparent 5px 50% no-repeat;
      display: inline-block;
      vertical-align: middle;
      width: 42px;
      height: 42px;
      border-right: #2265d4 1px solid;
    }
    span.buttonText {
      display: inline-block;
      vertical-align: middle;
      padding-left: 42px;
      padding-right: 42px;
      font-size: 14px;
      font-weight: bold;
      /* Use the Roboto font that is loaded in the <head> */
      font-family: 'Roboto', sans-serif;
    }
  </style>
  </head>

Note that you can find the actual icon file on Google's server for download.

Once you've set the styles and the Javascript, you would call the button itself through HTML, at which point you can specify the text:

  <body>
  <!-- In the callback, you would hide the gSignInWrapper element on a
  successful sign in -->
  <div id="gSignInWrapper">
    <span class="label">Sign in with:</span>
    <div id="customBtn" class="customGPlusSignIn">
      <span class="icon"></span>
      <span class="buttonText">Google</span>
    </div>
  </div>
  <div id="name"></div>
  <script>startApp();</script>
</body>
</html>

Note that you must comply with Google's branding guidelines.

Solution 2

Or you can just change the span text which is generated using Javascript, Try this replace your Div id with 'DivID' in the code

setTimeout(function () {
        $('#DivID div div span span:last').text("Sign up with Google");
        $('#DivID div div span span:first').text("Sign up with Google");
    }, 3000);

Solution 3

For the HTML section, for example we have this:

<div id="GoogeSigninButton" data-onsuccess="onSignIn" class="g-signin2"></div>

and for the script tag after the code of button, is like this:

<script>
    setTimeout(function () {
        $('#GoogeSigninButton div div span span:last').text("Custom Sign in Text");
        $('#GoogeSigninButton div div span span:first').text("Custom Sign in Text");
        $('#GoogeSigninButton div div span span:last').css("font-family", "Arial");//for font formatting
        $('#GoogeSigninButton div div span span:first').css("font-family", "Arial");//for font formatting
    }, 10000);
</script>

it will make the button's text after 10 second or so after pagee loaded,to a custom text you need and a custom font.

12,725

Author by

Lucy

Updated on June 15, 2022

Comments

Lucy almost 2 years
I have implemented Google Sign In for my website by following the official tutorial of Google : https://developers.google.com/identity/sign-in/web/sign-in

Using the above tutorial I'm getting the following button

Now I'm trying to Change the text of the button from "Sign In" to "Connect with Google" But nothing is happening..

My Javascript code..
```
           function onSignIn(googleUser) {

            var profile = googleUser.getBasicProfile();
            loginpassword = profile.getId();
            loginemail =  profile.getEmail();
        };
```
HTML Code..
```
     <div class="g-signin2" data-onsuccess="onSignIn">Connect with Google</div>
```
Any idea how to change the text? Even though I'm providing the client ID and the external link for platform.js file it's still not working..Please Help..