Installation & Configuration


Locator Installation

Download Demo Code
To install the Grappos Product Locator on your website you need a Unique ID (UID) from Grappos. Once you have your UID you can paste this Demo Code into your website.

Installation Tips

  • Make sure to replace ‘Your Grappos Unique ID’ with the UID provided by Grappos.
  • The locator is designed to size to its container element, so make sure the container and website are set up to take advantage of this resizing.
  • Locator styling can be configured using the grapposConfig values outlined below. Styling and content configurations are optional, however Grappos recommends using custom settings for bkgdClr, itemClr, txtClr, hoverClr and hoverTxtClr.
  • Links to reference installations can be found in our FAQ.
  • Make sure the web page where you host your locator has an SSL certificate. Without it, the autoLocate feature will not work for Google Chrome users.
  • Avoid installing your locator on an overlay, modal or interstitial if you use autoLocate so users aren’t asked to share their location before they are actively engaged with the locator.


Notes for WordPress Users

  • Before pasting in the code please make sure to select “Text” mode in your content editor.
  • If your settings are not working as expected, try removing all comments from the code.
  • To give the locator enough flexible space to dynamically resize for desktop and mobile screens you may need to adjust the settings of your template.


Configuration Options

Once your locator is installed, you can easily change customizations using the configuration options outlined below:


User Location Detection Options

The following options control how the user’s location will be determined.

Option Description
autoLocate Enable HTML5 automatic user location detection (prompts user for location).
Options: “true” (default), “false.”
Note: Google Chrome will not allow browser-based/HTML5 geolocation without SSL.
geoLocate Enable IP-based geolocation (does not prompt user for permission).
Options: “true”, “false” (default).
Note: Enables reasonably accurate geolocation on non-https sites for users on wifi; cellular accuracy can be low. The autoLocate config option must be ‘true’ to enable geoLocate.


Locator Styling Options

The following styling options ensure that the Grappos Product Locator integrates seamlessly with your website look and feel.

Option Description
fontFamily We support standard CSS declared font families.
Default = Lato
bkgdClr Background color of the locator.
Default = #894C57
itemClr Background color for lists and buttons.
Default = #651823
txtClr Locator text color.
Default = #FFFFFF
hoverClr Background color for list items and buttons on mouse over.
Default = #521823
hoverTxtClr Text color for buttons and list items on mouse over.
Default = #FFFFFF
buttonBorders Determines border around buttons. Options: ‘true’, ‘false’.
Default = ‘true’
iconLocationColor User location map marker color.
Default = #455967
iconCurrentColor Map marker color for the currently selected retailer. Dark colors are recommended.
Default = #000000
iconColor Map marker color for retailers not currently selected. Dark colors are recommended.
Default = #58585a
prevNextClr Text color for the PREV & NEXT buttons. If this setting is not specified, color will default to the color used for txtClr. Use this setting when txtClr and bkgdClr are similar.
Default = txtClr
theme To get started quickly, you can use one of three base themes: ‘default’, ‘green’, or ‘silver’. Note: To use theme, please deactivate the following config options: bkgdClr, itemClr, txtClr, hoverClr & hoverTxtClr.
mapStyles Insert map styling JSON to customize the appearance of the map. Generate JSON code at and
Default = Standard Google Maps Palette


Locator Content Options

In addition to styling options, Grappos Product Locators offer some flexibility in the presentation of search options and displayed results.

Option Description
onPremiseAlias Enables customized premise type name for on-premise accounts.
Default = ‘Restaurants’
offPremiseAlias Enables customized premise type name for off-premise accounts.
Default = ‘Stores’
premiseType Pre-selects the premise type for the initial search. Options: ‘All Retailers’, ‘Restaurants’, ‘Stores’.
Default = ‘All Retailers’
hidePremise Hides the premise field and expands the search location field. Options: ‘true’, ‘false’.
Default = ‘false’
hideBrands Hides the brand header row and the FIND ALL buttons in the product list. Options: ‘true’, ‘false’.
Default = ‘false’
productSearch Adds a product search filter above the product list. Options: ‘true’, ‘false’.
Default = ‘false’
numResults Maximum number of search results to be displayed.
Maximum = 100
Default = 50
distanceThreshold Maximum distance a retailer is from the initial search location.
Maximum = 100
Default = 25


Customizable Search URLs

The Grappos Product Locator allows you to create customizable search URLs that pre-determine search parameters, including:

  • Product
  • Brand
  • Location
  • Premise Type

To use custom URLs you must have a Grappos Product Locator installed on your website.

Option Description
gProdNM Product Name
gBrandNM Brand Name
gLocation Postal Code or City. E.g., you can specify “gLocation=94301” or “gLocation=San Jose, CA”.
gPremiseType Premise Type Options: ‘All Retailers’ (default), ‘Restaurants’, ‘Stores’

We're Here to Help

If you need assistance with locator installation or configuration, please let us know.