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 paste this Demo Code into your website.
Installation Tips
- Make sure to replace ‘Your Grappos Unique ID’ with the UID provided by Grappos.
- The locator is designed to size to its container element, so make sure the container and website are set up to take advantage of this resizing.
- Locator styling can be configured using the grapposConfig values outlined below. Styling and content configurations are optional, however Grappos recommends using custom settings for bkgdClr, itemClr, txtClr, hoverClr and hoverTxtClr.
- Links to reference installations can be found in our FAQ.
- Make sure the web page where you host your locator has an SSL certificate. Without it, the autoLocate feature will not work for Google Chrome users.
- Avoid installing your locator on an overlay, modal or interstitial if you use autoLocate so users aren’t asked to share their location before they are actively engaged with the locator.
Notes for WordPress Users
- Before pasting in the code please make sure to select “Text” mode in your content editor.
- If your settings are not working as expected, try removing all comments from the code.
- To give the locator enough flexible space to dynamically resize for desktop and mobile screens you may need to adjust the settings of your template.
Configuration Options
Once your locator is installed, you can easily change customizations using the configuration options outlined below:
User Location Detection Options
The following options control how the user’s location will be determined.
| Option | Description |
|---|---|
| autoLocate | Enable HTML5 automatic user location detection (prompts user for location). Options: “true” (default), “false.” Note: Google Chrome will not allow browser-based/HTML5 geolocation without SSL. |
| geoLocate | Enable IP-based geolocation (does not prompt user for permission). Options: “true”, “false” (default). Note: Enables reasonably accurate geolocation on non-https sites for users on wifi; cellular accuracy can be low. The autoLocate config option must be ‘true’ to enable geoLocate. |
Locator Styling Options
The following styling options ensure that the Grappos Product Locator integrates seamlessly with your website look and feel.
| Option | Description |
|---|---|
| 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’ |
| iconLocationColor | User location map marker color. Default = #455967 |
| iconCurrentColor | Map marker color for the currently selected retailer. Dark colors are recommended. Default = #000000 |
| iconColor | Map marker color for retailers not currently selected. Dark colors are recommended. Default = #58585a |
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 |
| 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. |
| 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 |
Locator Content Options
In addition to styling options, Grappos Product Locators offer some flexibility in the presentation of search options and displayed results.
| Option | Description |
|---|---|
| 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 |
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 have a Grappos Product Locator installed on your website.
| Option | Description |
|---|---|
| gProdNM | Product Name |
| gBrandNM | Brand Name |
| gLocation | Postal Code or City. E.g., you can specify “gLocation=94301” or “gLocation=San Jose, CA”. |
| gPremiseType | Premise Type Options: ‘All Retailers’ (default), ‘Restaurants’, ‘Stores’ |
We're Here to Help
If you need assistance with locator installation or configuration, please let us know.