Advanced Embedding with Square Market

Written by Jesse Reiss.

We built Square Market to give businesses a way to participate in and navigate the world of online commerce. Particularly those businesses traditionally not part of online commerce, like cafés, restaurants, and bars.

First, we built a way for these types of businesses to take more orders with a comprehensive self-service offering so they could sell food and beverages online for pickup.

Next, we took a look at the menus of these businesses. While many of our favorite restaurants, cafés, and bars have beautifully designed sites with detailed information about the venue and location, almost none of them had a menu listed. And if they did, it was often a clunky PDF. We knew we could give them a way to share their menu with the same quality and care as the rest of their sites.

Embedding to the Rescue

The concept of “embedded commerce” is the idea of an atomic unit of commerce embedded into a website that transforms that site into a place of commerce (A similar idea to a YouTube video widget or Facebook social widget). On Square Market we started small with item embeds with the plan to build embedded shopping carts, checkout flows, and even menus next.

Looking at these static PDF menus, it became clear it was time to get to work on embedded menus. The first step was to determine how to do it. Should we use Javascript to inject HTML into the host page, create an interactive menu web component, or should we go with the tried and true approach of embedding the content using an iFrame?

How to Embed

Injecting straight HTML was dangerous: who knows what world your HTML is walking into. With HTML, we would lose control of the styling and interactivity of the menu — it’s just too easy to override the styles and event handlers. While there were ways to scope and control the styling, it wasn’t reliable enough across browsers.

Web components are incredibly promising. With a web component, we can define a new HTML element with custom markup and well-defined interaction and lifecycle event behavior. The Shadow DOM allows us to apply our own styles and event handlers independent of the host page. Unfortunately, web components are still a bit too immature. Browser support is pretty abysmal; Chrome and Opera have decent support, Firefox is clearly trying, but Safari and IE are still terribly behind.

In the end, we decided on an iFrame, an approach we knew would work. It’s supported in every browser, provides a good isolated sandbox for styles and scripts, and is easy to update after it’s been deployed on a host site.

Getting it Done

Once we decided on an iFrame, we spun up a simple NodeJS app that served an Ember app to render the interactive menu. We chose Node to keep the entire stack in Javascript and to take advantage of the broccoli asset pipeline. We’re planning to extend the embedding functionality significantly and chose Ember because we’re really comfortable with Ember at Square. Ember is fantastic for removing boilerplate and enforcing consistent code style, especially with large complex frontends. We extended our existing embed script to handle the new menu embed type and we now have a product we’re excited to share.

How it Works

We recognize it is essential to allow businesses to customize their menu to fit their existing web site. So, we’ve built a simple, extensible API for customizing the menu contents.

The basic embed code looks like this:

<a href="https://mkt.com/menu-embed-test-coffee-shop" class="sq-embed-menu">Order Online</a>
<script src="https://cdn.sq-api.com/market/embed.js" charset="utf-8"></script>

With a few data attributes anyone can customize the contents.

It’s easy to show item images and descriptions in a column layout with an orange accent and no surrounding border, for example, by doing this:

<a href="https://mkt.com/menu-embed-test-coffee-shop"
    data-menu-item-images="small"
    data-menu-accent-color="ff5324"
    data-menu-template="column"
    data-menu-border="hide"
    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>

We’ve built a nice little UI as a starting place for building up these embeds.

What’s Next

We’re very excited to see how our sellers use our new menu embeds. We’re also planning to continue building out the embedded shopping experience beyond the basic menu, so please, stay tuned! Jesse Reiss *i want to be remembered for the things i built. engineering lead @square.*medium.com