Bullseye's Map on Top Interface lets you easily create a responsive store locator interface for your site, taking advantages of the adaptability inherent to responsive designs for desktop and mobile users. While the Map on Top interface doesn't need to be responsive, we recommend using the responsive option because its appearance is more elegant, when compared to the non responsive option (especially for mobile users).
To begin, login to your account and select Interfaces on the left. The select Add an Embeddable Interface. You'll see the screen below:
Select one of the 2 options, and select Next: Choose Options on the bottom right. You'll be taken to the Options screen:
Next to the General heading, expand the plus sign on the right to expand. You'll see the following screen:
Responsive Interface: We suggest selecting this option. The responsive interface works the best with both desktop and mobile searches.
Page Max-Width: If you use the responsive option, the width of the locator interface will normally adjust to the setting you have in your website, and you can leave this option blank. If you need to specify a particular width, you can also do this if necessary.
Events: With a premium subscription, Bullseye allows you to have events at locations displayed when locations are returned in the search results. In addition, you can create a separate search for Events only, which is displayed in a tab next to the main location search. Select this option if you want the events tab to be displayed.
Google Analytics: With a premium subscription, You can configure your interface to send captured data from the Searches By Locations Report to Google Analytics. Events tracked in Google Analytics include all searches, locations returned in the results, locations clicked, and links clicked for a particular location such as Directions, URL and Contact links.
To link your interface Google Analytics does not need to be configured (Events are created automatically when the interface is linked.), however you will need to get the Google Analytics code that comes with your Google Analytics account. In Bullseye, you will need to enter the code along with the Host URL in the interface:
- Host URL: Enter the exact URL of the site where the interface is going to be IFramed. The complete URL must be provided including "http/https".
- Google Analytics Code: Enter the code provided by your Google Analytics account, include UA-.
When you are done, you can close the General tab by selecting the minus sign, and expanding the Map tab:
Display Map: Most clients prefer to include the map with the interface. If you prefer to display locations without the map, you can uncheck this option. Note that, the option to not include the map is not available in the Map on Side interface.
Map Height: By default the map will be displayed at 210 px high. If you'd like to expand the number of pixels to make the map taller, you may do so.
Custom Map Icons: By default, the map icon for your locations with be a red plot image. You can replace that image by uploading your own image. First, select Choose File to select the map icon (or drop the file into the box with your mouse). After that, a button will appear to upload the image. Select upload. Make sure you complete both steps.
To configure the search, select the plus sign next to Search:
Internet Locations Only: Select this option if you want to display only Internet locations in the search (regular locations will be omitted).
Choose Countries: Select either to display all countries your account is configured for, or manually select certain countries if you need to create an interface that displays select countries within your account.
Category: Select Limit Search Categories if you want to designate specific categories to the interface. Often, this is used for companies that need multiple brand-specific locations within a single account (Web Premium subscription required). After you select this check box, an option will appear to allow you to select from the list of entered categories.
Categories may be displayed as checkboxes or within a drop down menu for selection. Web Premium subscription also include the ability to search by subcategories (this works for the drop down option only). Select the appropriate option as needed.
Keyword: Select this option if you want users to be able to search by the name of the location (this is entered in the Location Name field). Users may search for the name of the location on its own, or they may combine this with the radius search.
Radius Options: Add or remove radii as needed. If you need to add a radius, simple type it into the text box, and select add, or select Remove to remove existing radii. Use Set Default to make one of the radii default (The default radius is used in conjunction with location auto detection. When users arrive at the search, the search can detect the location of the user, and search automatically within the default radius you set.
To configure Results, select the plus sign next to Results:
Results Per Page: Set the number of results to between 1 and 20.
Text to display when there are no results: Put a message that will explain to the user that no results were found. You may want to link to another page, or include a phone number for them to call.
Categories in Results: Check this option if you want the names of the categories (products or services that locations carry) to be included on the location record in the search results.
Promotions: Check this option if you want to include coupons/promotions on locations in the search results (Web Premium subscription required).
Events (Display Events): Check this option if you want to include events on locations in the search results (Web Premium subscription required).
Events (Include Events Registration): Check this option if you want to include a form on locations in the search results to register for events (Events Registration subscription required). You can select a form you have created from the drop down list.
Contact Name and Position: Check this option if you want to include this extra data on the location in the results.
Location Image: Include an image on the location by checking this option.
Local Landing Page: Include a landing page with extra information by checking this option.
Lead Capture: Allow users to fill out a form and submit their information as a lead to individual locations (Lead Manager subscription required). You can select a form you have created from the drop down list.
Login/Edit Location Link: Display a link to allow locations to login and manage their own data in Bullseye.
Find Nearest Location: Select this option if you want to display a single location that is closest, when no results are found within the selected radius.
Holiday Hours: Select this option if you want to display special holiday hours along with regular hours for locations.
To view the Language option, select the plus sign next to Language:
You will see a checkbox to enable the language drop down. This option allows the user to select individual languages from a drop down menu. Note that, Bullseye is also able to detect the user's language automatically. This option allows the user to also select a language manually. This may come in handy if the user is bi-lingual, or if the user using a browser in a foreign country. They can select the language from a drop down menu to override the language that is displayed. If you want to select this option, select the check box. You will see the following:
A list of languages will appear. Select the languages that apply to your locator then choose the Select button.
When you are done with the Options tab, select Styles, you'll see the screen below:
Under Basic, you have the option of selecting a standard color for your template. If the options we include match the color of your website, you can select one of the colors, and the corresponding hex code for the style will appear under General Style Settings. If you need to customize any of the colors, you need to enter the code into the Background Color, Navigation Color, Button Color, or Link Color fields. After you change any of the colors, the custom option will appear as in the example above. From the Font drop down, select the font family that best works with your site.
The Advanced tab lets you override our CSS with your own CSS:
You can write your own CSS in the provided text field to override our CSS styles. When you are done, select Publish at the top or Next: Publish Options on the bottom.
You'll see the following:
Now that you have the template, options, and styles configured, you are ready to save the interface so you can put the interface on your site, or link to our interface from your site. First, you need to save the interface. Select Save as in the example above. You will be prompted to name the interface:
Enter the name of the interface (letters only) and select Save and Close.
You'll be taken back to the list of interfaces. Select Edit on the appropriate interface, then Publish. You have the option to embed the interface in an IFrame on your site, or to paste your site's headers and footers into our interface page, and link to it. Let's look at the IFrame option first. Select the Plus sign next to the option iFrame Embed for Website:
A text field will expand with the code that needs to be pasted into your website. Simply paste the code into the area on your page where you want it to display.
Now let's look at the option to paste your header and footer into our page. If you'd rather not embed code on your site, or if there is some restriction enforced that prevents you from pasting into an iFrame, this option comes in handy. Select the plus sign next to the option Hosted URL with HTML input for Header and Footer:
If you are only using Bullseye's landing page, you can select the check box to enable landing pages only. Most clients use the entire locator. Select Enable Custom Code. You'll see 3 text fields to paste your custom code. You can optionally include your Head Section in the first box. Paste your header into the editor where it says Add your custom header code here. You can view the code or the normal look as you would view it on the web once you save it. You can do the same for the footer as well.
Once you have the code pasted, select Save at the top.