Setup
Installing the Product Locator

Installation

Download Demo Code
To install the locator on your website you need to have a Unique ID from grappos.com. Once you have this ID you can copy/paste the below snippet into your site. The locator is designed to size to its container element.

<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>

You can change the width and height of the locator by specifying their style values.

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

Basic Themes

Currently there are 3 base themes that you can use for styling the locator. These are set by defining the theme option of the GrapposConfig object.

Theme Name	Screenshot
default
green
silver

Example Configuration

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

Advanced Styling Options

If you want to customize the locator further, you can use the following properties for a fully integrated look.

Option Name	Description
bkgdClr	Background Color of the Product Locator
itemClr	Background Color for Lists and Buttons
txtClr	Locator Text Color
hoverClr	Background Color for list items and buttons on Mouse Over
hoverTxtClr	Text Color for buttons and list items on Mouse Over
fontFamily	By default the locator uses the Web Font “Lato”, We also support “Bitter” and any standard css declared font families.
buttonBorders	Determines border color around buttons. Options: “true”, “false”
prevNextClr	Text color for the “Prev” & “Next” buttons. If this setting is not included, it will default to the color used for txtClr. Use this setting when txtClr and bkgdClr are similar.
buttonBkgd	Should buttons use the itemClr as background color? Options: “true”, “false”
iconLocationColor	User location map marker color. #455967 is the default.
iconColor	Map marker color for retailers not currently selected. Dark colors are recommended. #58585a is the default.
scrollBarClr	Scrollbar handle color. #B1B1B1 is the default.
scrollBarBkgdClr	Background color of the scrollbar. #eaeaea is the default.
errorClr	Background color of the “Determining Location” dialog bubble. #ff6666 is the default. The text color synced to txtClr.
onPremiseAlias	Customizes the on-premise category name. “Restaurants” is the default if this setting is not used.
offPremiseAlias	Customizes the off-premise category name. “Stores” is the default if this setting is not used.

Example Configuration

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

Additional Product Locator Options

By default the locator will limit results to 50 and search within a 25 mile radius. If desired you can increase these settings to a max of 100.

Option Name	Description
productSearch	Enables the product filter above the list. Options: “true”, “false” (default).
numResults	Maximum Number of Results to be displayed.
distanceThreshold	Maximum distance a retailer is from the search location
autoLocate	Should locator automatically request user location? Options: “true” (default), “false”
premiseType	Preselects the premise-type used for the search. Options: “All Retailers” (default), “Restaurants”, “Wine Shops”

Example Configuration

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

Default Search/Location URLs

Using the latest version of the Grappos Product Locator allows you to craft custom urls that will cause the locator to pre-search for a Brand or Product.

To use the custom urls you must first install the locator on your site for our example we will say the locator is at /locator/. We can then use the following parametes to preset the broduct, brand and/or location.

Option Name	Description
gProdNM	Product Name (as saved in Grappos)
gBrandNM	Brand Name (as saved in Grappos)
gLocation	Postal Code or City of where you want search to default to. For example, you can specify “gLocation=94301” or “gLocation=San Jose, CA”.
gAutoLocate	Should locator automatically request user location? Options: “true” (default), “false”
gPremiseType	Preselects the premise-type used for the search. Options: “All Retailers” (default), “Restaurants”, “Wine Shops”

If you had a product named “Harvest Moon White,” your custom url for a search in San Jose, CA would be <a href=”./locator/?gProdNM=Harvest Moon White&gLocation=San Jose, CA”>Find near you!</a>

You can contact Grappos for Product/Brand IDs or use the names as displayed in your locator.