Name: google-yolo-inline
Owner: Zapier
Description: A demo of how to include Google one tap sign-up into your own sign up form
Created: 2018-04-09 22:28:57.0
Updated: 2018-05-09 21:12:25.0
Pushed: 2018-05-01 21:59:20.0
Homepage: https://zapier.github.io/google-yolo-inline/
Size: 21
Language: HTML
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
index.html shows how to seamlessly include Google one tap sign-up (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 ?
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” 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.
We recommend wrapping Google one tap in an <iframe> so you can include it inline with your own sign up form, or wherever makes sense for your website.
Google one tap sign-up works by inserting an <iframe> into your document's <body> with position: fixed and z-index: 9999 to overlay your website. Under the hood, Google one tap sign-up is based on OpenYOLO-Web, which fortunately permits you to embed it within another <iframe> that you control. See 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. It's used like:
ame id="google-iframe" src="google-yolo-iframe.html"></iframe>
In the place of the standard onGoogleYoloLoad callback handlers, 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.