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.