Taplist.io Embed Example

Shows how to embed and customize a Taplist.io menu.

by TaplistIO

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- To customize appearance, try editing the CSS at right -->
<!-- You shouldn't need to change the HTML below.          -->

<div class="container">
  <h1>Taplist.io Embed Widget Example</h1>
  <div class="row">
    <div class="col-sm">
      <p class="lead">
        Welcome to the Taplist.io Embed Widget example page!
      </p>
      <p>
        This is a simple web page showing off Taplist.io's embed mode. You
        can view source to see how it works. All customization happens in
        CSS.
      </p>
    </div>
  </div>

  <div class="row">
    <div class="col-sm">
      <!-- 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 -->
    </div>
  </div>
</div>

<script>
  // You can optionally define a callback to fire when the menu
  // is loaded.
  //
  // If you're not using this feature, this whole <script> block is
  // unnecessary.
  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>

CSS

.taplistio-embed {
  /**
   * Styles for the whole menu. You could change the default
   * font here, etc.
   */
   font-family: Arial, Helvetica, sans-serif;
}

.taplistio-header {
 /**
  * Styles for menu section headers.
  */
  color: #333333;
}

.taplistio-tap-illustration {
  /* Uncomment next line to hide tap illustrations. */
  /* display: none; */
}

.taplistio-tap-details {
  /**
   * Styles for the whole tap details block. This includes all
   * of the classes below this one.
   */
   border: 1px solid #eee;
   border-radius: 5px;
   padding: 5px;
}

.taplistio-tap {
  /**
   * Styles for a whole tap.
   */
   background-color: #ccd;
}

.taplistio-beverage-name {
  /* Styles for the beverage name. */
}

.taplistio-producer-name {
  /* Styles for the producer name. */
}

.taplistio-beverage-prices {
  /* Styles for the beverage prices. */
}

.taplistio-description {
  /* Styles for the description. */
}