---
title: Embedding
date: 2017-03-16
tags: [code, design]
description: A while ago I worked on a project where we wanted to allow to embed our web application into client's websites. 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.
---

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](https://dev.twitter.com/web/embedded-timelines))
-	*Applications* (e.g. [soundcloud player](https://help.soundcloud.com/hc/en-us/articles/115003449627-The-HTML5-embedded-player))
-	Functionality that *integrates* into the website (e.g. [disqus](https://disqus.com/))

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.
-	JavaScript initialisation had to be triggered manually.
-	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.