New feature: Customizable embed mode

Another week, another cool new feature to announce: We have a brand new “embed mode” for subscribers which opens up a world of new options.

How it works

The new embed mode can be used on any page where you can drop in HTML.

You drop in a short HTML block, which you can retrieve from your Location settings page. Here’s an example with my venue:

<!-- 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 -->

Once it loads, an HTML menu with very modest (and easily customizable) default CSS will render automatically. You can use CSS to hide things you don’t want to show, or style them differently.

For more advanced uses, you can register a javascript callback and get your tap’s data as a JSON object:

<script>
  window.taplistIo = {
    onDataAvailable: function (venueName, data) {
      console.log('Advanced callback: Data is available for ' + venueName);
      console.log('Do cool stuff here!');
      console.log('Data: ', data);
    },
  };
</script>

You can view an example here in a jsfiddle: https://jsfiddle.net/TaplistIO/1gp3t0ub/

This feature is subject to slight change, but is ready for you to give it a whirl now. Give a shout if you’ve got any feedback or requests; we’ve talked to two bars already using it and loving it.

cheers!

Since a real example probably helps, here’s an example of a happy Taplister using the embed mode — I am sure Kevin doesn’t mind the free publicity for their new brewery!

https://www.barearms.beer/our-brews/