This documentation is obsolete. Please see updated documentation at http://docs.singleplatform.com/spv2/javascript-api/

JavaScript APIs

JavaScript API Requirements

Browser Compatibility

The SinglePlatform Menus API currently supports Firefox 1.5+, IE7+, Safari and Chrome.

Element IDs and Class Names

All element IDs and class names used in the menus begin with the string:

sp_

Using the Menus JavaScript API

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

Load the Menus JavaScript API

Include the following scripts in the webpage to contain the menu. Where it says YOUR_API_KEY_HERE, enter your SinglePlatform API Key.

<script type="text/javascript" src="http://menus.singleplatform.co/jsload?load=menus.2&apiKey=YOUR_API_KEY_HERE"></script>

Get the Menus

Now we use the MenusApi class to load the menus for a location and place them in the target element on the page. The following lines of JavaScript show how to load the menus.

var menuApi = new MenusApi("YOUR_API_KEY_HERE");
menuApi.loadMenusForLocation("LOCATION_ID", "ID_OF_TARGET_ELEMENT");

When writing your code, make the following replacements:

For YOUR_API_KEY_HERE, enter your SinglePlatform API Key
For ID_OF_TARGET_ELEMENT, put the ID of the target HTML element into which the menu should be placed
For LOCATION_ID, put the alpha-numeric ID of the location for which to load the menus (note: this is not the externalId)

Get the Mobile-Optimized Menus

Getting the mobile-optimized menus is similar to getting the full-website menus. The difference is the name of the function that loads the menus: loadMobileMenusForLocation(). The following lines of JavaScript show how to load the mobile menus.

var menuApi = new MenusApi("YOUR_API_KEY_HERE");
menuApi.loadMobileMenusForLocation("LOCATION_ID", "ID_OF_TARGET_ELEMENT");

When writing your code, make the replacements just as you would for the full-website menus.

Get the Short Menu ("Most Popular" / "Menu Preview")

Getting the shortened menu is similar to getting the full-website menus. The difference is the name of the function that loads the menus: loadShortMenuForLocation(). The following lines of JavaScript show how to load the short menu.

var menuApi = new MenusApi("YOUR_API_KEY_HERE");
menuApi.loadShortMenuForLocation("LOCATION_ID", "ID_OF_TARGET_ELEMENT", "FULL_MENU_URL_OR_CALLBACK");

When writing your code, make the replacements just as you would for the full-website menus. The third parameter, FULL_MENU_URL_OR_CALLBACK, is optional and determines what happens when a user clicks the full menu link. Details:

The possible values that can be passed in are:
- A string containing a URL that will open in the window
- A function that will be called
If nothing is passed in, the full menu on singlepage.com is opened in a popup window.

Get the Mobile-Optimized Short Menu ("Most Popular" / "Menu Preview")

Getting the mobile-optimized short menu is similar to getting the website short menu. The difference is the name of the function that loads the menus:loadMobileShortMenuForLocation(). The following lines of JavaScript show how to load the short menu.

var menuApi = new MenusApi("YOUR_API_KEY_HERE");
menuApi.loadMobileShortMenuForLocation("LOCATION_ID", "ID_OF_TARGET_ELEMENT", "FULL_MENU_URL_OR_CALLBACK");

When writing your code, make the replacements just as you would for the website short menu. The third parameter, FULL_MENU_URL_OR_CALLBACK, is optional and determines what happens when a user clicks the full menu link. Details:

The possible values that can be passed in are:
- A string containing a URL that will open in the window
- A function that will be called
If nothing is passed in, the full menu on singlepage.com is opened in a popup window.

Menu Style and Behavior Customization

Before loading the menu, some style and behavior customization can be made by calling methods on the instance of the MenusApi class in the JavaScript code.

The custimizations are applied by calling functions on the MenusApi instance created in the javascript integration. The following code shows a couple examples of how to set some styles:

var menuApi = new MenusApi("YOUR_API_KEY_HERE");

menuApi.setPrimaryFontFamily("Calibri");
menuApi.setPrimaryColor("#ccc").setSecondaryColor("#aaa");

menuApi.loadMenusForLocation("LOCATION_ID", "ID_OF_TARGET_ELEMENT");

Notice that the calls can be chained, as shown by the setting of the primary and secondary colors.

This method of customizing styles also applies for mobile menus.

Menu Style and Behavior Functions

Below is the list of available functions. First, a couple of general notes on the functions.

The function arguments all accept a particular type of CSS setting. The accepted values are:

for color: a valid CSS color needs to be passed in
for fontFamily: a valid string of font families needs to be passed in
for size: a valid CSS size string needs to be passed in

setPrimaryBackgroundColor( color )

setPrimaryBackgroundColor() sets the primary background color in the menu. It applies to:

Menu title background
Menu border
Item separator
Short Menu: menu title background
Short Menu: menu border
Short Menu: item separator

The default color is:

#D9D9D9

setSecondaryBackgroundColor( color )

setSecondaryBackgroundColor() sets the secondary background color. It applies to:

The space between the menu and the disclaimer
The background behind the 'Menu Provided by SinglePlatform' image
Short Menu: the background behind the 'Provided by SP' image

The default color is:

white

setMenuDescBackgroundColor( color )

setMenuDescBackgroundColor() sets the background color of:

Menu description background

The default color is the primary background color.

setSectionTitleBackgroundColor( color )

setSectionTitleBackgroundColor() sets the background color of:

Section titles

The default section title background color is:

#E3E3E3

setSectionDescBackgroundColor( color )

setSectionDescBackgroundColor() sets the background color of:

Section descriptions

The default section description background color is the same as the section title background color.

setItemBackgroundColor( color )

setItemBackgroundColor() sets the background color of:

Items
Short Menu: items

The default color is the secondary background color.

setFeedbackBackgroundColor( color )

setFeedbackBackgroundColor() sets the background color of:

Feedback (Edit Menu) accordion background, excluding the form fields, submit button and cancel button.

The default color is the color of the section title background with 20 (hex 0x14) added to each of the RGB channels.

setFeedbackFieldBackgroundColor( color )

setFeedbackFieldBackgroundColor() sets the background color of:

The fields in the feedback (Edit Menu) accordion form

The default color is the color of the item background.

setFeedbackSubmitBackgroundColor( color )

setFeedbackSubmitBackgroundColor() sets the background color of:

The submit button of the feedback (Edit Menu) accordion form

The default color is the color of the item background.

setFeedbackCancelBackgroundColor( color )

setFeedbackCancelBackgroundColor() sets the background color of:

The cancel button of the feedback (Edit Menu) accordion form

The default color is the color of the feedback background.

setBaseFontSize( size )

setBaseFontSize() sets the base font size of the text in the menu and short menu. The size of all text in the menu and short menu is then set relative to the base font size.

The default value is set to:

12px

setPrimaryFontFamily( fontFamily )

setPrimaryFontFamily() sets the font family for:

Menu title
Menu footnote
Menu disclaimer
Short Menu: menu title
Short Menu: "view full" link

The default value (graceful degradation) is:

Calibri, Helvetica, Verdana, Sans-Serif

setPrimaryFontColor( color )

setPrimaryFontColor() sets the font color for:

Menu title
Menu footnote
Menu disclaimer
Short Menu: menu title
Short Menu: "view full" link

The default value is:

black

setMenuDescFontFamily( fontFamily )

setMenuDescFontFamily() sets the font family for:

Menu description background

The default value is the primary font family.

setMenuDescFontColor( color )

setMenuDescFontColor() sets the font color for:

Menu description background

The default value is the primary font color.

setSectionTitleFontFamily( fontFamily )

setSectionTitleFontFamily() sets the font family for:

Section titles

The default value is the primary font family.

setSectionTitleFontColor( color )

setSectionTitleFontColor() sets the font color for:

Section titles

The default value is the primary font color.

setSectionDescFontFamily( fontFamily )

setSectionDescFontFamily() sets the font family for:

Section descriptions

The default value is the primary font family.

setSectionDescFontColor( color )

setSectionDescFontColor() sets the font color for:

Section descriptions

The default value is:

#777

setItemTitleFontFamily( fontFamily )

setItemTitleFontFamily() sets the font family for:

Item titles
Short Menu: item titles

The default value is the primary font family.

setItemTitleFontColor( color )

setItemTitleFontColor() sets the font color for:

Item titles
Short Menu: item titles

The default value is the primary font color.

setItemPriceFontFamily( fontFamily )

setItemPriceFontFamily() sets the font family for:

Item prices
Item price labels
Short Menu: item prices

The default value is the item title font family.

setItemPriceFontColor( color )

setItemPriceFontColor() sets the font color for:

Item prices
Item price labels
Short Menu: item prices

The default value is the item title font color.

setItemDescFontFamily( fontFamily )

setItemDescFontFamily() sets the font family for:

Item descriptions

The default value is the primary font family.

setItemDescFontColor( color )

setItemDescFontColor() sets the font color for:

Item descriptions

The default value is:

#777

setFeedbackFontFamily( fontFamily )

setFeedbackFontFamily() sets the font family for:

Feedback (Edit Menu) accordion text, excluding the form fields, submit button and cancel button

The default value is the primary font family.

setFeedbackFontColor( color )

setFeedbackFontColor() sets the font color for:

Feedback (Edit Menu) accordion text, excluding the form fields, submit button and cancel button

The default value is:

#777

setFeedbackFieldFontFamily( fontFamily )

setFeedbackFieldFontFamily() sets the font family for:

The fields in the feedback (Edit Menu) accordion form

The default value is the primary font family.

setFeedbackFieldFontColor( color )

setFeedbackFieldFontColor() sets the font color for:

The fields in the feedback (Edit Menu) accordion form

The default value is:

#777

setFeedbackSubmitFontFamily( fontFamily )

setFeedbackSubmitFontFamily() sets the font family for:

The submit button of the feedback (Edit Menu) accordion form

The default value is the primary font family.

setFeedbackSubmitFontColor( color )

setFeedbackSubmitFontColor() sets the font color for:

The submit button of the feedback (Edit Menu) accordion form

The default value is the value of the section title background color with 20 (hex 0x14) subtracted from each of the RGB channels.

setFeedbackCancelFontFamily( fontFamily )

setFeedbackCancelFontFamily() sets the font family for:

The cancel button of the feedback (Edit Menu) accordion form

The default value is the primary font family.

setFeedbackCancelFontColor( color )

setFeedbackCancelFontColor() sets the font color for:

The cancel button of the feedback (Edit Menu) accordion form

The default value is the value of the feedback font color.

Full Menu API Integration Example

A complete example might look like:

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

<div id="menusContainer"></div>

<p> Some other text </p>

<script type="text/javascript" src="http://menus.singleplatform.co/jsload?load=menus.2&apiKey=K4j13GNS317751SV13SHUUEX2sgg7D2bs"></script>
<script>
    var menuApi = new MenusApi("K4j13GNS317751SV13SHUUEX2sgg7D2bs");
    menuApi.setBaseFontSize("10pt");
    menuApi.setPrimaryFontFamily("Arial");
    menuApi.setPrimaryBackgroundColor("#eee");
    menuApi.setSecondaryBackgroundColor("#ccc");
    menuApi.setSectionTitleFontColor("blue");
    menuApi.loadMenusForLocation("haru-7", "menusContainer");
</script>

</body>
</html>