Can I embed a Taplist.io menu on another website?

Would you like to embed your beverage menu on Wordpress, Squarespace, or any other website? You can! Read on.

Requirements

Taplist.io supports a rich and versatile embedded widget. You'll need the following things in order to use it:

A paid Taplist.io Pro plan subscription.
A hosting provider that supports the <script> tag.

How to embed

To embed your menu, locate your widget instructions from the taplist.io dashboard.

First, visit the Web Page tab, then click Embed.

You will see a code snippet. Copy and paste this code snippet into your web host to embed the menu.

Script snippet or iframe snippet?

We support two different methods for embedding your menu:

Iframe snippet—simplest method.
Script snippet—most customizable.

When using the iframe snippet, your web menu will look exactly like your taplist.io web page (taplist.io/<name>). Using the dashboard, you can customize this page, including various font styles, and so on.

Conversely, using the script snippet, you can achieve a far more customizable look on your web page, as long as you or your web developer is handy with CSS. You can also use the script snippet without any customization, which many of our customers do!

Overall, we recommend the script snippet unless you prefer the simplicity of the iframe method or cannot use script tags for some reason.

How to customize

Once your menu is embedded, you may want to customize its appearance.

Although Taplist.io has a built-in editor for your TV menu and hosted web menu, the embedded menu works a little bit differently: All customizations to embedded menus are done through CSS. We've found this approach gives our clients the maximum flexibility to match their site.

For a detailed guide, see How to customize your embedded menu with CSS.

Example code

The following code embeds the demo venue, "Mike's Ale Haus", with default appearance. If you're curious about whether your host supports the script tag, you can try using this widget.

<!-- BEGIN Taplist.io Menu -->
<div class="taplistio-embed-menu" data-venue="mike"></div><script async src="https://taplist.io/embed/embed.js" charset="utf-8"></script>
<!-- END Taplist.io Menu --><br>