Installation
View Demo
Demo Code
Documentation PDF
To install the Grappos product locator on your website you need a Unique ID (UID) from Grappos. Once you have your UID, replace “Your Grappos Unique ID” in the demo code with the provided UID. 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 customize the appearance of the locator.
| Option | Description | Default |
|---|---|---|
| backgroundImage | Background image for initial load screen. Secure URLs are recommended. Example: https://www.grappos.com/demo/grappos/grappos_image.jpg | View Default |
| primaryColor | Button background and rollover color. Should contrast and complement ‘secondaryColor’. | #3C75F1 |
| secondaryColor | Background color for top of UI and results count. 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. 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 customize the locator font.
| Option | Description | Default |
|---|---|---|
| fontFamily | Sets font family. | Open Sans |
| fontConfig | Sets font platform. Options:
|
Interface Options
These optional configurations control which locator features are visible.
| Option | Description | Default |
|---|---|---|
| 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 control premise type aliases and icon colors.
| Option | Description | Default |
|---|---|---|
| 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 control the initial search experience and results.
| Option | Description | Default |
|---|---|---|
| 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. When using autoSearch with a single-brand locator that has multiple products, brandHeaderRow (“Find All”) must be enabled. |
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 |
|---|---|---|
| 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 display buttons and links to delivery services on the initial load screen.
| Option | Description | Default |
|---|---|---|
| orderDelivery | Displays delivery services on initial load screen. Options: show, hide. | hide |
| orderDeliveryTitle | Text label for the order delivery feature. | n/a |
| orderDeliveryName1 | Name of first delivery service. | n/a |
| orderDeliveryURL1 | Destination URL for first delivery service button. | n/a |
| orderDeliveryName2 | Name of second delivery service. | n/a |
| orderDeliveryURL2 | Destination URL for second delivery service button. | n/a |
| orderDeliveryName3 | Name of third delivery service. | n/a |
| orderDeliveryURL3 | Destination URL for third delivery service button. | 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’ |