A while ago I worked on a project where we wanted to allow to embed our web application into client's websites. The goal was to lower the barrier of entrance, especially for people who already used our client's websites regularly.
To be honest, I am not sure whether this feature was ever really used. But I still think that the design considerations that went into it were solid.
While working on this concept we looked at several existing embedding systems and found three distinct categories:
- Widgets with limited interaction (e.g. twitter timeline)
- Applications (e.g. soundcloud player)
- Functionality that integrates into the website (e.g. disqus)
We decided to go with the "application" approach. But we did not want to create a completely separate UI for embedding. Instead, we chose to use PJAX to make the existing website UI feel like an app when it was embedded.
One clear distinction was the fixed header and footer that provided clear boundaries for our embed and its scrolling contents. The other one were page transitions. These two changes made the whole experience feel much more like an app.
However, we could not use page transitions for all navigation. We decided that platform functionality like account settings is not really related to an embedding page and should therefore be handled on the platform. So these links opened in a new tab.
The second exception was the login which opened in a popup for security reasons: An iframe does not have a location bar, so phishing attacks would be trivial.
There were some restrictions to this approach:
- The URL of the iframe was not the same as that of its contents.
- Modals could open in parts of the iframe that were off screen.
- Nested scrolling has bad usability.
- Login only worked if third party cookies were allowed in the browser.
In retrospect, I think this was one of the cases where we really did our research and, as a consequence, really knew the problemspace. Our solution managed to balance the different requirements quite well, but in the end it did not provide a good enough usability to be used in production.
One major flaw was the fact that you still needed to register for an account in order to do most things. So the barrier of entrance was not so low after all. My takeaway from all this: complex embeds are possible. But not worthwhile in most cases.