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.

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.