Setup
Installing the Grappos Product Locator

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 copy/paste this code into your website:

<div id="grappos-widget"></div>
<script type="text/javascript" src="//www.grappos.com/rwidget/js/load.js"></script>
<script type="text/javascript">
var grapposConfig = {};
    grapposConfig.uid = 'Your Grappos Unique ID';
</script>


The locator is designed to size to its container element. You can change the width and height of the locator by specifying each value.

<div id="grappos-widget" style="width: 100%; height: 620px;"></div>


Once your locator is installed, you can explore customizations:


Locator Styling Options

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

Option Description
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.
View base themes.
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’
buttonBkgd Should buttons use the itemClr as background color? Options: ‘true’, ‘false’.
Default = ‘true’
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
iconLocationColor User location map marker color.
Default = #455967
iconColor Map marker color for retailers not currently selected. Dark colors are recommended.
Default = #58585a
iconCurrentColor Map marker color for the currently selected retailer. Dark colors are recommended.
Default = #000000
errorClr Background color of the ‘Determining Location’ dialog bubble. Note: The text color is synced to txtClr.
Default = #ff6666
mapStyles Insert map styling JSON to customize the appearance of the map. Generate JSON code at https://mapstyle.withgoogle.com and https://snazzymaps.com.
Default = Standard Google Maps Palette

Example Configuration

<script type="text/javascript">
var grapposConfig = {};
    grapposConfig.uid = 'Your Grappos Unique ID';
    grapposConfig.theme = 'silver';
    grapposConfig.fontFamily= '"Bitter"';
    grapposConfig.txtClr = '#C6C6C6';
</script>


Locator Content Options

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

Option Description
autoLocate Automatically request user location. Options: ‘true’, ‘false’.
Default = ‘true’
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

Example Configuration

<script type="text/javascript">
var grapposConfig = {};
    grapposConfig.uid = 'Your Grappos Unique ID';
    grapposConfig.numResults = 10;
    grapposConfig.distanceThreshold= 50;
</script>


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 first install the locator on your site.

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


Base Themes

To get started quickly, there are three base themes that you can use for styling the locator. These are set by defining the theme option.

Theme Name Screenshot
Default
Green
Silver

Example Configuration

<script type="text/javascript">
var grapposConfig = {};
    grapposConfig.uid = 'Your Grappos Unique ID';
    grapposConfig.theme = 'silver';
</script>

Have Questions?

If you have questions about how to best configure your Grappos Product Locator or format your data, check out the FAQ or contact us and we’ll get back to you right away.