August 7, 2014 | 4 minute read

Even More Advanced Interactive Menus

Our interactive menu embeds now turn your website into an online store

Written by Harris Tsim, Keith Chu, and Matthias Reichenbach.

Three weeks ago, we introduced Menu Embeds to our merchants. Since then, thousands of merchants have embedded their store fronts (aka. “menus”) on their sites to drive sales. We received a lot of great feedback and heard a common theme: make the embed experience even more streamlined and efficient. Today, we are launching the Menu Embed v2, which adds Shopping Basket support.

In the initial release, when a customer clicked on an item in a seller’s menu, they would be taken to the item’s page on Square Market. This flow nudged customers away from seller’s sites and also made buying multiple items unnecessarily tedious. We’ve greatly refined the experience with today’s release. When a customer clicks on an item, a responsive item modal displays so they can customize their order right on the seller’s site.

We’ve included a basket tab on the right side of the site too. Clicking on it slides out a shopping cart so customers can easily edit and review their purchase before checking out.

When they’re ready, customers can simply checkout through a white label flow in Market.

Houston, We Have a Design Problem

When we set out to create embeddable menus, we came across technical challenges that gated design flexibility. As an example, some merchants have tiny menus, which limits the space we have to work with. This presents a challenge: how do we show ancillary information about each item? Imagine a sandwich shop that only sells a single item — let’s call it the “Sandwich” — but it comes in many different sizes (small, medium, large) and has several different modifiers (add mayonnaise, remove pickles, extra cheese). Our designers experimented with a number of approaches, but providing a great experience for all variations of menu content proved challenging. Eventually, we agreed that opening a modal with the extra information was the right approach.

You may be wondering, “opening a modal isn’t hard, so why didn’t you just do that from the start?” Solving this issue in a robust way was not as trivial as we initially thought it was going to be! The embed iframe occupies a small area that is displayed inline with the rest of the seller’s site. Opening up a modal requires gaining access to the entire viewport of the browser, not just the portion inside the iframe. If we just change the size of the iframe, not only would the viewer’s experience be jarring, but the integrity of the seller’s site design could be compromised. We considered opening up two iframes to make the experience feel more seamless, but this solution had several major pitfalls.

A Tale of Multiple Iframes

Using multiple iframes is a viable solution in many cases as long as the embed isn’t too complex. Once a certain threshold is crossed things get complicated quickly. Compounding the issue, using multiple iframes can require initializing full-fledged web applications multiple times. For our use case, not only would this approach greatly increase the load time for both server and browser, it would also become increasingly problematic to synchronize data across the iframes. Keeping data consistent across data storage is a very difficult computer science problem even though the scale could be kept relatively smaller on the client-side.

Iframe Explosion

Square strives for elegance in both engineering and design implementation. Since using multiple iframes wouldn’t provide us with an optimal experience, we came up with a solution that would: iframe explosion. Taking a script we’ve embedded on the page, we fixed-position the iframe so that it fills up the viewport, then hide its contents. In doing so, we can show a modal that feels tightly integrated into the site on which it’s embedded.

Still, this presented a new challenge: if we position the iframe outside the document flow, the page’s contents will collapse, destroying the illusion. Even if we could hold the iframe’s position, we had yet to find a way to keep the menu in place and responsive so it would hold up to interaction convincingly. How we did this is detailed below and fairly straightforward, but it took countless hours of rendering and performance optimization to make it feel right.

When a buyer clicks on an item in the menu, a script on the page creates a temporary placeholder with the same dimensions as the iframe. The iframe invisibly expands to the size of the viewport and opens a modal. The placeholder’s styles are then passed back to the iframe and applied to the original menu, so it looks as if the menu is still fixed in place underneath the modal. Since the exploded iframe is positioned on top of the site, we can intercept the click when the buyer wants to close the modal. The result is a beautiful solution that preserves our standards for both engineering and design.

Demo

This small snippet of code…

<a href="https://mkt.com/boba-guys"
    data-menu-item-images="small"
    data-menu-item-template="column"
    data-menu-item-descriptions="show"
    class="sq-embed-menu">Order Online</a>
<script src="https://cdn.sq-api.com/market/embed.js" charset="utf-8"></script>

If you want to test-drive this experience with your own menu, get started by logging into your dashboard.