Step-by-Step example

Simple example on how to set up a store-locator

Step-by-Step guide

In this step-by-step guide you will learn how to setup, manage and integrate a store-locator with the Nearest! location management platform. For a better understanding it is recommended to start with the term definitions before. If you're not familiar with our dashboard please have a look at the dashboard section. In every section of this guide you'll find the link to the additional information in the docs.

Described scenario: We have multiple stores which are stored in a Google Docs sheet with the following information: Name, address, opening hours, free parking, brand and phone. We want to add this static information into an interactive store-locator to our website and synchronize the data regularly.

Quick steps overview

1. Setup a locator app

   1. Adding elements

   2. Defining global contents

2. Adding locations

   1. Manual creation

   2. Automatic bulk import

   3. Scheduled synchronization

3. Adding an interface

   1. Customizing UI

   2. Map icons & filter

   3. Integrate it into website

4. Analytics

   1. Adding UA code

   2. Setup analytics dashboard

Set up a locator app

In the first step we will register to Nearest! location management platform. Then we will add a new locator with New locator by adding the locator name MyStores Locator and clicking create.

Adding elements

Under Locations > Elements & filter we can configure our custom elements. As described above our data source has the following information available: Name, address, opening hours, free parking, brand and phone.

pageElements & Filter

Name

By default the location name element is already added.

Address

The address element is a required element so it's added already by default.

Opening Hours

Add a new element by clicking Create Element and choose openingHours as element type.

pageOpening hours

Free parking

Free parking sounds like it is a boolean value and it would be nice to filter for that value. We add an element again, choosing bool as type and enable the filterable option.

Brand

Brand sounds like every location can be of one or multiple brand values so we will choose select as the data type and we will add all available brand values to the element. It would also be helpful to filter for that element so let's enable the filterable option again.

Not sure about the correct element type? Learn more in data types...

Adding a select element with values and set filterable

pageSelect field

Phone

By default the phone element is already added.

Defining global contents

In contents & texts we can now add some information to the app. It is recommended to add at least one keyword to improve the user experience with better understanding of the interface. All other contents can be added or edited later.

pageContents & Texts

Adding locations

Now we will add some data to our app. First we will add a location manually to check if all elements are added and configured correctly.

Manual creation

Click Locations > Add. First you need to add an address or coordinates. By clicking preserve you can drag/drop the marker on the map without changing the address field. This should be done if you want to add the marker to a more precise position without changing the postal address. After that you can fill in the element information for that location.

Automatic bulk import

Now that we checked the manual creation of a location and saw that everything is correct we can bulk import all locations from our Google Docs file.

You need to share your custom Google Docs file with [e-mail] before importing to Nearest! Learn more ...

Go to Locations > Import & Sync and create a new Import. Change the type to Google Docs and enter the Google DocsID for the file.

Now we need to connect the data from the sheet with our elements with the Element Connector.

• #1st step

• #2nd step

• #3rd step

pageImport & Synchronization

Scheduled synchronization

Ok, the initial import is done but what if the data changes in that sheet? We need to synchronize our app with that data regularly by easily following the next steps:

• #1 step

• #2 step

• #3 step

pageScheduling

Adding Interfaces

Now that we added data to our app and configured synchronization it's time to generate an interface and a view to our data.

Customizing UI

In Interface > Web-app > User Interface we can change the colors to adept our corporate identity. Then we can upload our logo.

Map Icons & Filter

Wouldn't it be great if the marker icon could reflect the brand of the location? Sure it would so let's do that in a few simple steps. Go to Interface > Web-app > Map & Icons: We first should change the default icon by clicking Upload. Add the file and edit Size and Anchor to set correct display settings.

Then click Optional settings > Add Icon to add a new icon rule. Add your icon file and settings and choose Add Condition. Select the brand element and choose the right value for the uploaded icon. Done!

pageMap & Icons

Integrate into website

For now we successfully generated our custom store locator. We will know integrate it into our website:

Code

<iframe src="https://yourapp.nearest.place" 
  height="500" 
  width="100%"
  allow="geolocation"
  style="border:none;"></iframe>

Copy and paste that code into your existing website and you're done!

pageiFrame

Check Analyzations