Customizing your Website Widget

This page has been written for webmasters and others with knowledge of HTML and CSS.

Each location you create on the Interchange Design site has a tap menu that can be embedded on your website. Get the specific code for your widget in Settings > Website Widget.

Using Custom CSS

To use custom CSS, remove the &defaultCSS=true parameter from the script source URL.

Ensure your custom CSS is loaded before the <div id="InterchangeDesignTapMenu"></div> block in your HTML output.

CSS Components of the Widget

The website widget generates HTML with the following CSS tag structure:

<div id="InterchangeDesignTapMenu">
    <div class="interchangeDesign-container">
        <div class="interchangeDesign-item">
            <div class="interchangeDesign-beer">
                <p>
                    <span class="interchangeDesign-beerName"></span><br>
                    <span class="interchangeDesign-beerStyle"></span><br>
                    <span class="interchangeDesign-beerInfo"></span>
                </p>
            </div>
            <div class="interchangeDesign-beerPricing">
                <p>
                    <span class="interchangeDesign-beerPrice"></span> <span class="interchangeDesign-servingInfo"></span>
                </p>
            </div>
        </div>
    </div>
</div>

Wrapper

The entirety of the code is wrapped in the InterchangeDesignTapMenu id selector.

Container

The tap menu is contained within the interchangeDesign-container class selector. This class contains the <h1>On Tap</h1> line of HTML.

Items

Each tap menu item lives within a interchangeDesign-item class selector. This code block is repeated for each item on your tap menu.

Beer

The interchangeDesign-beer class contains a paragraph <p> code block that contains three spans, broken by line breaks (<br>) :

  • interchangeDesign-beerName
  • interchangeDesign-beerStyle
  • interchangeDesign-beerInfo

The beerName and beerStyle spans contain exactly what you would expect; the name and style of the beer respectively.

The beerInfo span contains three parameters that are combined into a string:

  • brewery
  • ABV
  • IBU

In cases where the ABV or IBU is zero (or where the variable is empty), they are omitted from the string.

In the default state, this block is floated to create the left column of a two column layout.

Beer Pricing

The interchangeDesign-beerPricing block contains the serving variants for the tap item. This block contains a paragraph (<p>) tag which contains two spans, separated by a line break (<br>) when two or more variants exist for a tap item. Those two spans are:

  • interchangeDesign-beerPrice
  • interchangeDesign-servingInfo

In cases where the beerPrice is equal to zero, the string will display “Free”.

In the default state, this block is floated to create the right column of a two column layout.

Published Date: July 4, 2017

©2018 Interchange Design

Twitter Instagram