Our widget has a new option that helps it work better on mobile devices. This will keep the user experience in a single browser window for best compatibility on mobile devices.
Popup vs Redirect
Our widget works very reliably on desktop browsers. Back in 2010, we created the widget with desktop browsing as the priority, when mobile browsers were a tiny fraction of our traffic. When we started, we had a decision to make: do we open the OAuth flow in a popup window or do we redirect the whole browser window?
Because desktop was our primary focus, the popup window made reasonable sense. The main reason we chose to not to redirect the window is that we didn’t want our widget to take the user away from our customer’s website. We thought (and I still do) that despite being out of fashion, using a popup window reduces the risk of a person leaving a customer’s web site completely if they become distracted during the consent flow.
Of course, times have changed considerably and now mobile accounts for at least 30% of our widget sessions. That ratio may be much higher for individual customers who have mobile oriented business. Over the past couple years, there have been a few issues with the popup that caused pain for users on mobile devices.
So, what is new?
Enough humbling background. The short story is that you finally have a choice when you use our widget. By default,
our widget will continue to launch a popup window to manage the OAuth flow, but if you’d like to force the new
behavior you can specify a value for
inline_oauth. Passing a
true value will force the inline flow always.
inline_oauth: 'mobile' will force the inline flow on mobile devices only,
preserving the popup flow on desktop browsers.
By default, our application will redirect the browser back to the page it was previously on. Once our widget loads, it will open, displaying the user’s address book. We use the URL fragment to pass a message to our widget indicating what to do. If you don’t want to return to the same page, let me know. We have a parameter to override, but since we pass some data back to the widget using the URL fragment, I want to make sure that there isn’t a conflict with your page.
How does it look? Our test-drive is using the inline flow on mobile devices, so point your favorite mobile browser/emulator at /test-drive/ to check it out.
Or watch the demo video above that demonstrates importing my Gmail contacts on iOS.
Is there no alternative?
It might be nicer to find a technical solution using an iframe to display the authentication form.
We don’t do this because providers don’t allow it. For modern browsers, they send a value of
This prevents any site from hosting the page in an iframe. In older times, these same
Happy testing! Reach out to firstname.lastname@example.org with any questions.