Setup
Installation & Configuration

 

Installation

View Demo & Download Code
Please click here to view a demo and 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 from Grappos, replace “Your Grappos Unique ID” in the demo code with the UID provided. This will display your selected brand(s) and product(s) in the locator. Then simply paste the code with your UID into your website. Some notes:

• The locator is designed to size to its container element, so please ensure the container and website are set up to take advantage of this resizing.
• Make sure the web page hosting your locator has an SSL certificate. Without it, the ‘getMyLocation’ feature will not work for Google Chrome users. If needed, you can disable the ‘getMyLocation’ feature. Once disabled, users will be required to enter a ZIP code to start a search.
• The appearance of the locator can be configured using the ‘grapposConfig’ values outlined below. All configurations are optional and can be changed at any time.
• WordPress users: Before pasting in the code please make sure to select “Text” mode in your content editor.
• WordPress users: If your settings are not working as expected, try removing any comments from the code.
• WordPress users: 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

Once your Grappos product locator is installed, you can easily customize it using the configuration options outlined below:

• Styling Options
• Font Options
• Interface Options
• Premise Type Options
• Search Options
• Google Maps Options
• Order Delivery Options

 
 

Styling Options

These optional configurations allow you to customize the appearance of the locator.

Option	Description	Default Value
backgroundImage	Background image for initial load screen.   Note: Secure URLs are recommended.	View Default
primaryColor	Button background and rollover color.   Note: Should contrast and complement ‘secondaryColor’.	#3C75F1
secondaryColor	Background color for top of UI and results count.   Note: Should contrast and complement ‘primaryColor’.	#16409E
alertColor	Background color for alerts.	#FF972C
textNormalColor	Main text color; also controls image tint for ‘backgroundImage’.	#414869
textLightColor	Color of secondary UI text and hairline rule lines.	#8D9FAE
buttonTextColor	Color of text in buttons, alerts and rollover items.   Note: Should contrast with ‘primaryColor’.	#FFFFFF
backgroundColor	Background color of product list, premise filter and attribution.	#F2F2F2
resultBackgroundColor	Background color of results list.	#FFFFFF

 
 

Font Options

These optional configurations allow you to customize the locator font.

Option	Description	Default Value
fontFamily	Sets font family.	Open Sans
fontConfig	Sets font platform. Options: Google Fonts: fontConfig = {google:{families: [‘Font Name’]}}; Adobe Typekit: fontConfig = {typekit:{id: ‘YOUR_TYPEKIT_ID’}};	Google

 
 

Interface Options

These optional configurations allow you to control which locator features are visible.

Option	Description	Default Value
getMyLocation	Displays crosshair icon that allows users to automatically determine their location on wifi or cellular. Options: show, hide.	show
productSearchBar	Displays search field that allows users to filter the product list. Recommended for very long product lists. Options: show, hide.	hide
brandHeaderRow	Displays the brand name for each product group and the brand search (“Find All”) button. Options: show, hide.	show
searchRadiusBar	Displays search radius bar. Options: show, hide.	show
premiseControls	Displays premise type controls. Options: show, hide.	show
otherProducts	Displays list of other products from the UID that are available at the selected retailer. Options: show, hide.   Note: This feature is supported only for data delivered via files; not available for data delivered via API.	show
notifyURL	Displays a modal when a brand or product is not available within the distance threshold. This feature allows the user to request to be notified when a product becomes available in their area. The specified URL opens in a new window; Grappos passes the corresponding search criteria to the target URL.   Note: Grappos does not host the target URL, store user information, or manage user inquiries.	n/a

 
 

Premise Type Options

These optional configurations allow you to control premise type aliases and icon colors.

Option	Description	Default Value
onPremiseAlias	Alias for on-premise accounts.	Restaurants
offPremiseAlias	Alias for off-premise accounts.	Stores
onPremiseIconColor	Icon color for on-premise accounts.	#6E3A91
offPremiseIconColor	Icon color for off-premise accounts.	#232F8F
userLocationIconColor	Icon color for user location.	#3C75F1

 
 

Search Options

These optional configurations allow you to control the initial search experience and results.

Option	Description	Default Value
autoSearch	Automatically executes a search upon user location entry. Recommended for locators with single products. Options: on, off.   Note: Supported for single-brand locators only.	off
primaryView	Determines how mobile users see initial results: on a map or as a list. Options: map, list.	map
premiseType	Sets premise type for initial search. Options: on, off, all.	all
distanceThreshold	Sets search radius for initial search. Options: 5, 10, 25, 50, 100.	25
numResults	Sets maximum number of results displayed. Options: 1-100.	50

 
 

Google Maps Options

These optional configurations control Google Maps.

Option	Description	Default Value
customMapStyle	Customize the map appearance by entering custom JSON.   JSON code can be generated at: https://mapstyle.withgoogle.com https://snazzymaps.com   Grappos provides design support services; contact support	Custom grayscale
googleMapKey	Enter your Google Maps API Key to link map usage to your Google account.	n/a

 
 

Order Delivery Options

These optional configurations allow you to display buttons and links to delivery services on initial load screen.

Option	Description	Default Value
orderDelivery	Displays delivery services on initial load screen. Options: show, hide.	hide
orderDeliveryTitle	Text label for delivery services section.	n/a
orderDeliveryName1	Name of first delivery service.	n/a
orderDeliveryURL1	URL for first delivery service.	n/a
orderDeliveryName2	Name of second delivery service.	n/a
orderDeliveryURL2	URL for second delivery service.	n/a
orderDeliveryName3	Name of third delivery service.	n/a
orderDeliveryURL3	URL for third delivery service.	n/a

 
 

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’