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:

• Styling Options
• Content Options
• Search URLs

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>