https://github.com/zapier/google-yolo-inline
A demo of how to include Google One-tap sign up anywhere on your own site
https://github.com/zapier/google-yolo-inline
Last synced: 4 months ago
JSON representation
A demo of how to include Google One-tap sign up anywhere on your own site
- Host: GitHub
- URL: https://github.com/zapier/google-yolo-inline
- Owner: zapier
- License: mit
- Created: 2018-04-09T22:28:57.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-11T18:48:40.000Z (almost 8 years ago)
- Last Synced: 2025-03-21T15:43:10.293Z (over 1 year ago)
- Language: HTML
- Homepage:
- Size: 16.6 KB
- Stars: 90
- Watchers: 133
- Forks: 18
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Inline Google One-tap Sign Up
To run the demo, clone the repo then start a server:
```
python -m SimpleHTTPServer 8080
```
[`index.html`](index.html) shows how to include [Google One-tap sign up](https://developers.google.com/identity/one-tap/web/overview) (a.k.a. Google Yolo) into your own sign up form, or wherever it makes sense for your website, to help your sign up conversion rate 🚀
## Problems With Google One-Tap
By default, Google One-tap sign-up shows as a `position: fixed` popup that overlays your website. This can frustrate your users if it occludes important information or navigation. Users may also be confused if this is the first time they've seen Google One-tap sign-up, since most ["Sign in with Google"](https://developers.google.com/identity/branding-guidelines) experiences today are along side a traditional sign up form, not isolated in their own popup.
*Example from hipmunk.com showing Google One-tap's out-of-the-box experience.*
## Solution
We recommend wrapping Google One-tap in an `` so you can include it inline with your own sign up form, or wherever makes sense for your website.
## Technical Details
Google One-tap sign-up works by inserting an `` into your document's `` with `position: fixed` and `z-index: 9999` to overlay your website. Under the hood, Google One-tap sign-up is based on [OpenYOLO-Web](https://github.com/openid/OpenYOLO-Web), which fortunately permits you to embed it within *another* `` that you control. See [GoogleYoloIframed](https://github.com/TMSCH/GoogleYoloIframed) for a basic example.
This demo builds on GoogleYoloIframed by accounting for responsive design (so the Google account picker can be set to `width: 100%`) and expanding height (if the user clicks the `2 more accounts` button to reveal all their Google accounts).
This behavior is mostly implemented by [`google-yolo-iframe.html`](google-yolo-iframe.html). It's used like:
```
```
In the place of the standard `onGoogleYoloLoad` [callback handlers](https://developers.google.com/identity/one-tap/web/retrieve-hints#handle_the_hint_request_result), you'll instead register for `window.addEventListener('message', () => { /* handler here */ })`, which catches events from `google-yolo-iframe.html`.
When `event.data.type === 'height'` is caught, this means GoogleYolo's iframe has changed height. Be sure to update `google-iframe`'s height.