The Locu Publisher Platform (LPP) lets publishers display Locu’s highly structured local business data directly on their site — 100% free of charge. This is accomplished by installing Locu’s menu javascript widget (aka, Locu widget).

In the example below, TimeOut Chicago is complementing their existing local business content with Locu's data available through the LPP, including listings, menus, and pricing information. The Locu widget (area marked as “Powered by Locu”) has easily been inserted into TimeOut Chicago’s site and styled to match their existing branding.

While previously, visitors may have navigated away from the site to get additional information on a local business they were reading about, they can now access real-time listings, offerings, and pricing information for that particular business directly on TimeOut Chicago’s site.

With the LPP, publishers have additional content to serve ads around and can enrich their audience’s experience with up-to-date and accurate local business data. Locu does not charge data licensing or setup fees for joining the LPP. To get started, please consult instructions for customizing and installing the Locu widget below.

The Locu widget is a Javascript-based solution that allows local business data (like listings, menus, service lists, and pricing info). hosted on Locu to be easily inserted into HTML pages hosted on arbitrary domains. The widget is implemented as a dynamically generated (on Locu's web servers) Javascript file that constructs the menu widget (both the content and css styling) on the target webpage as soon as it is loaded by the browser. The widget is constructed this way to get the best SEO on your (not Locu's) site. Once constructed, the contents of the widget is inserted right after the location of the script tag loading the Javascript file.

The look and feel of the Locu widget is customizable in two ways:

Currently, Locu does not have a developer-specific dashboard for customizing the widget. Instead, developers must log into the normal Locu product, and create a widget there. After you are done customizing, contact Locu and request that we update it. Steps:

  1. Log into Locu.com, using the same user that signed up on dev.locu.com
  2. Create a test menu if one is not already present
  3. Click on "Design" to open the menu design tab
  4. Click on "Customize Design" on the right to open the widget theme selector
  5. Click on "Switch template" and pick a template that is closest to your desired look and feel. We suggest sticking with the "Clean" template.
  6. (optional) Customize the template by clicking "Edit Source" and modifying the HTML and CSS. See the widget template language documentation for guidance. Contact us if you need help with widget customization
  7. Contact Locu support and ask to have your merchant widget (created above) converted into a developer widget. Be sure to include your account name and API key
  8. Install the widget as described below

Before installing the widget, you must decide which matching mode to use. The matching mode decides how Locu determines what price list / menu to show for each widget instance. The widget has multiple operating modes based on how the venue is specified:

We suggest using the match-based widget. This is by far the easiest way to integrate Locu into your site, since it is not necessary to keep track of Locu venue IDs in your own database.

To create a new widget, copy and paste the following code to the desired location of the menu widget and fill in the values for the { script-id } and { query-parameters } variables, which are described below. This script tag will load and construct the widget contents and styling for a desired set of menus, and insert it right after the tag.

<script type="text/javascript" src="https://widget.locu.com/menuwidget/locu.widget.developer.v2.0.js?{ query-parameters }"></script>

Script ID

The id field of the widget script tag is used by the loaded Javascript itself to determine the location that the widget content should be inserted. The preferred id for a single widget on a given page is -locu-menuwidget. If you choose to use a different id, it must be specified in the script-id query parameter as well (see query parameter table below).

Query Parameters

The following table outlines each of the possible query parameters that can be passed to the widget script tag. All parameters that have defaults specified are optional.

Parameter Name Description Type Default
widget-key Your Locu developer widget key, that can be found on your profile page. String
script-id The id of the script tag used to request the widget Javascript code. This is used to find the location following the script tag to insert the menus. If you wish to display multiple widgets on a single page, use this to specify a unique id for each script tag (note that you will need to update the id attribute of the script tag to match). String -locu-widget
venue-id The Locu venue identifier for the business.
Only used in venue ID mode
String
name The name of the venue.
Only used in automatch mode
String
address The street address of the venue; for example "560 Sutter Street".
Only used in automatch mode
String
locality The locality (city) of the venue; for example "San Francisco".
Only used in automatch mode
String
region The region (state) of the venue; for example "California".
Only used in automatch mode
String
postal-code The postal code (zip) of the venue; for example "94102" or "P1L 1W9".
Only used in automatch mode
String
merchant-url The URL of the merchant; for example, "http://www.bobs-thai.com".
Only used in automatch mode
String
debug Specifies whether the widget should print error messages on incorrect query arguments or other errors. If set to false, all errors will be treated as if there are no menus to display. Boolean false

No Menus

If there are no menus found for the specified business location, or if the venue id is not valid, the widget script will insert the following message just after the location of the script tag: Sorry, we have no menus available for this business at this time. Please check back later.

Disabled Javascript

Because the widget is rendered dynamically in the user's browser with Javascript, visitors that do not have Javascript enabled will not see any menus at the location of the script tag.

To warn such users, it may be desirable to include the following <noscript> tag directly above the widget script tag:

<noscript>Please enable Javascript to view this business' menus</noscript>

URL Character Limit

The maximum supported length of the URL used to specify the widget and all of its query parameters is 2083 characters, due to restrictions on the length of GET request URLs in Internet Explorer. Unfortunately, because the widget relies on using a dynamically generated Javascript file, we cannot use the common technique of using POST requests to overcome this limitation.

The following script tag will dynamically fetch, construct, and insert an html widget just following the script tag. The widget will include all of the menus (navigatable using tabs) for the business, and render it in the default Locu Menu Widget style. This version leverages Locu's matcher to avoid specifying the ID directly.

<script type="text/javascript" src="https://widget.locu.com/menuwidget/locu.widget.developer.v2.0.js?name=Fictitious+Foods&address=1+cambridge+center&locality=Cambridge&region=MA&postal-code=02142&country=united+states&merchant-url=http%3A%2F%2Ffictitious-foods.com&script-id=-locu-widget-auto&widget-key={ widget key here }"></script>

This is the same as the automatch example above, but uses ID-based matching to determine what menu to get.

<script type="text/javascript" id="-locu-widget" src="https://widget.locu.com/menuwidget/locu.widget.developer.v2.0.js?venue-id=11111124354&widget-key={ widget key here }"></script>