Using the Menus Widget

The following sections demonstrate how to incorporate the SinglePlatform Menus API into your web page or application.

Browser Compatibility

The SinglePlatform Menus API currently supports Chrome, Firefox, Safari, IE10+, and Edge.

Load the Menus

Place the following script tag into the HTML element that should contain the menu:


<script
    data-location="LOCATION_ID"
    data-api_key="YOUR_API_KEY_HERE"
    id="singleplatform-menu"
    src="https://menus.singleplatform.com/widget"></script>

When writing your code, make the following replacements: - For YOUR_API_KEY_HERE, enter your SinglePlatform API Key - For LOCATION_ID, put the alpha-numeric ID of the location for which to load the menus (note: this is not the externalId)

Style and behavior can be customized by including additional data attributes in the script tag.

The following code shows a couple examples of how to set some styles:


<script
    data-location="island-prime"
    data-api_key="K4j13GNS317751SV13SHUUEX2sgg7D2bs"
    data-primary_font_family="Calibri"
    data-primary_background_color="#ccc"
    id="singleplatform-menu"
    src="https://menus.singleplatform.com/widget"></script>

Below is the list of supported attributes.

data-location

required

The alpha-numeric ID of the location for which to load the menus.

data-api_key

required

Your SinglePlatform API Key.

data-base_font_size

Any valid CSS size value.

The font size of normal text of your menu. Other font sizes, such as for titles and footnotes, will scale in proportion.

Example:

data-base_font_size="16px"
data-display_menu

A comma-separated list of menu ID's

Indicates which menus to display.

If this attribute is omitted, all menus associated with the location will be displayed.

Example:

data-display_menu="43155,12341,65432"
data-dropdown_background_color

Any valid CSS color value

Defines the background color of the menu selection dropdown.

If this attribute is omitted, data-item_background_color or data-primary_background_color will be used instead.

Example:

data-dropdown_background_color="rgba(120, 90, 0, 0.4)"
data-font_casing

Can be "uppercase", "lowercase", or "capitalize"

Transforms the font casing of the entire menu to upper, lower, or capitalized case.

data-hide_announcements

When enabled, the announcements are not displayed. No value needs to be assigned to this attribute.

data-hide_attribution

When enabled, the SinglePlatform logo on the bottom of the menu is not displayed. No value needs to be assigned to this attribute.

data-hide_claim

When enabled, the "claim this location" button is never displayed for non-customer locations. No value needs to be assigned to this attribute.

data-hide_cover_photo

When enabled, the cover image on top of the menu is not displayed. No value needs to be assigned to this attribute.

data-hide_currency_symbol

When enabled, the menu item prices are displayed without a currency symbol. No value needs to be assigned to this attribute.

data-hide_disclaimer

When enabled, the SinglePlatform disclaimer, Terms of Service, and Private Policy links are not displayed. No value needs to be assigned to this attribute.

data-hide_price

When enabled, the menu items are listed without prices. No value needs to be assigned to this attribute.

data-item_background_color

Any valid CSS color value

Sets the menu item background color. Applies to: - Announcement - Menu selection dropdown - Menu frame and border - Menu section title - Menu sections - Leader dots - Footnote

This setting will override the primary background color for all of the above mentioned.

Example:

data-item_background_color="#d9d9d9"
data-item_desc_font_color

Any valid CSS color value

Sets the item description font color.

Example:

data-item_desc_font_color="black"
data-item_price_font_color

Any valid CSS color value

Sets the item price font color. Applies to: - Item price - Leader dots

data-item_title_font_color

Any valid CSS color value

Sets the item title font color.

data-menu_desc_background_color

Any valid CSS color value

Sets the menu description background color.

data-menu_desc_font_color

Any valid CSS color value

Sets the menu description font color.

data-primary_background_color

Any valid CSS color value

Sets the primary background color. Applies to:

  • Announcement
  • Menu selection dropdown
  • Menu frame and border
  • Menu section title
  • Leader dots
  • Footnote
data-primary_font_color

Any valid CSS color value

Sets the primary font color for the entire menu.

data-primary_font_family

Any valid CSS value that corresponds to a standard web font (see data-stylesheet for instructions on custom fonts)

Example:

data-primary_font_family="verdana,arial,sans-serif"
data-section_desc_background_color

Any valid CSS color value

Sets the section description background color.

data-section_desc_font_color

Any valid CSS color value

Sets the section description font color.

data-section_title_background_color

Any valid CSS color value

Sets the section title background color.

data-section_title_font_color

Any valid CSS color value

Sets the section title font color.

data-show_location_title

When enabled, the location title is show on top of the menu; disabled by default. No value needs to be assigned to this attribute.

data-stylesheet

A space-separated list of URL's

Loads external stylesheets into the menu. Can be used to define custom fonts, customize the menu layout, or add animations.

Example:

data-stylesheet="https://fonts.googleapis.com/css?family=Tangerine|Antic https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

Full Menu API Integration Example

A complete example might look like:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p> Some text </p>

    <div id="menusContainer">
        <script
            data-location="island-prime"
            data-api_key="K4j13GNS317751SV13SHUUEX2sgg7D2bs"
            data-base_font_size="10pt"
            data-primary_font_family="Arial"
            data-primary_background_color="#eee"
            data-secondary_background_color="#ccc"
            data-section_title_font_color="blue"
            data-hide_announcements
            id="singleplatform-menu"
            src="https://menus.singleplatform.com/widget"></script>
    </div>

    <p> Some other text </p>
  </body>
</html>