Here’s a briefing on the purpose of each file:
This file contains the default styles. You can modify these or use your own StyleSheet if you prefer, but these should help you to get started or fill the need if you just want to keep it clean and simple.
This file contains all of the code which generates the HTML for the banner and retrieves location information from your user as well as from the Bullseye web service. There are several variables in this file which you should modify in order to get the banner set up. These have all been extracted and placed at the top of the code so you shouldn’t have any trouble finding them.
Now that you have some knowledge of the files that you’re going to be working with, let’s take a peek at what we’ll be creating. You can load the “bullseye-banner-example.html” file in your web browser. After it has loaded, it should ask you to share your location. Once you share your location, the banner will either display the location closest to you or a message if there is not a location around you in the radius specified. For demonstration purposes, we have used a test client and API key with a radius of 25 miles. You’ll need to change these later in the tutorial.
var absoluteUrl = '';
If you’re going to be referencing files like images from another domain, you can add the URL here between the quotes. Otherwise, leave it blank.
var bullseyeApiKey = '3e3e1e95-b36c-4884-adfb-4e9343959419';
This is your Bullseye API key, which you can get by logging into the Bullseye Admin and going to your account page. Replace the demo value above with your actual API key.
var bullseyeClientId = '473';
This is your Bullseye Client ID, which should be available next to your API key in the Bullseye Admin. Replace the demo value above with your actual Client ID.
var imagesDir = 'images';
This is the directory where you will put the images for the loading and map icons. We provide these images by default, but you can replace them with your own. Here, our folder for the demo is called “images”. The final path is formed by appending this directory to the “absoluteUrl”. So, for this demo, since we don’t specify an “absoluteUrl”, our images folder is referenced relatively.
var linkToLocalLocator = 'https://www.bullseyelocations-staging.com/pages/mobile/search.aspx?name=DemoInterface';
Here is where you should add a link to your locator page. If your users want to search further or if there is not a location near them, they can click to view your locator at this URL.
var locationTerm = 'store';
You can change the term text that displays in the banner for your locations if your locations are called something other than “store” such as dealer, restaurant, location, etc.
var searchRadius = '25';
This defines the radius for which to search based on your user’s location. It should be any logical number above 0. (Note: A larger search radius will increase the time needed to return the location data.)
If you don’t want to display the phone number of the location, you can set “displayPhone” to false. It is set to true by default.
var displayPhone = true;
Go ahead and change the variables which pertain to you. At the very minimum, you should change the bullseyeApiKey, bullseyeClientId and linkToLocalLocator. Once you have changed these values, reload the HTML page in your browser and you should now get one of your locations if there is one near you in the radius specified. If you are returning a location, this is great news! You have successfully completed the tutorial and implemented your banner. If not, below is a simple checklist you can follow to make sure you didn’t miss any steps.
- Make sure you have placed the empty “div” with ID of “bullseye-banner-header” in the Body tag of your HTML file.
- Make sure you have modified at least the bullseyeApiKey, bullseyeClientId and linkToLocalLocator variables in the “bullseye-nearest-location-banner.js” file.
That should be it to get you up and running with a Bullseye banner widget that helps your customers quickly and easily access location information closest to them. If you’re interested in extending this banner, have a look at the Bullseye web service method used in creating this widget (https://api.bullseyelocations.com/v1.0/reference#dosearch2).