Advanced Embedding with Square Market
Ember an interactive menu into your website using 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.
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
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.
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