Add The Map on Top or Map on Side Interface to your Site
Also See:
Bullseye's embeddable Interface lets you easily create a responsive store locator interface for your site, taking advantage 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). In this example, we will use the Map on Side Interface. Besides the appearance of the map, the features in the Map on Side interface generally apply to the Map on Top Interface as well.
| Requirements: Any paid subscription. |
Template
To begin, log in to your account and select Interfaces on the left. Then select the Embeddable Interface and click Add.
You'll see the screen below. Select either the Map on Side or Map on Top template, then select Next: Choose Options on the bottom right.:
You'll be taken to the Options screen:
Options
Next to the General heading, expand the plus sign on the right to expand. You'll see the following screen:
Responsive Interface: We suggest using 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 on your website, and you can leave this option blank. If you need to specify a particular width, you can also do this if necessary.
Choose Countries: By default, the interface will search for all locations, for all countries included in your subscription. You also have the option to selectively include countries in your interface, if you need to exclude certain countries.
Cross Country Borders: If you are using the radius search, this option allows you to return locations within a radius that are in a neighboring country from the entered information. Your search rules must be configured to return radius results only for this to work. If your account is configured to return results with radius, and also the "Other International" region, this will also work.
Category: You have the option to limit the categories in the interface. You may want to use this option if you want to have more than one locator in your account, each designated to specific brands or products.
Internet Locations Only: You may select this option if you want the interface to search for internet locations only, instead of brick and mortar locations.
Events: 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: 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-.
After that information is entered, you will need to re-implement the Bullseye Iframe code on your site. You can find the code in the Publish heading in the interface.
Domain Path: Domain paths allow interfaces and landing pages to be displayed under your domain, instead of Bullseye's domain within the standard Iframe. This option is only available to Bullseye Locations - contact us for more information.
When you are done, you can close the General tab by selecting the minus sign, and expanding the Map tab:
Show Internet Locations on Map: If search rules are configured to return Internet locations in results, they will be included on the map by default. Disable the Show Internet Locations on Map option to hide Internet locations on the map.
When you are done, you can close the General tab by selecting the minus sign, and expanding the Search tab:
Default Search: There are 5 options for default search behavior. Only one default search behavior can be selected.
Detect User Location on Page Load: By default, accounts are automatically able to attempt to detect a user’s location by their IP Address. This is required to perform an auto-search of locations based on the user's location. Uncheck this option to prevent a user's location from being detected and an auto-search from being performed.
Auto-search on page load: If location detection is on, locators can use Auto-search, based on a user’s location, to search for locations. This option cannot be selected if location detection is off. When using auto-search, you can choose whether to populate the search filter with the detected postal code or city and state.
- Use Postal Code for Auto-search: Select this option to populate the search text field with a detected postal code instead of city and state when users first arrive at the search.
- Use city and state/province for auto-search: Select this option to populate the search text field with the detected city and state instead of a postal code when users first arrive at the search.
Display all Locations on Map: This option displays all locations on the map in alphabetical order.
Display all Locations per Country: This option displays all locations in a detected or selected country on page load, in alphabetical order, if the country is configured for radius search. On subsequent searches after the initial page load, results will be limited as configured in search rules. If a country is configured for territory or any other type of search, this option is not used.
- Display nearest Locations in list: This option can be used in conjunction with the Display all Locations per country option, in order to display all locations on the map, but only the nearest locations in the results list.
Preset Locations: Select this option to display all locations in an existing location group. After selecting this option, a drop-down menu will appear to allow you to select from the list of existing location groups.
Preset map center and zoom: Select this option to configure a map center and zoom level, and display a blank map based on those specifications. After selecting this option, a map will appear that you can zoom into and drag to the desired position.
Choose display when user's location cannot be detected: When location detection doesn’t work, a user’s location cannot be found, and auto-search cannot work. If Autosearch is selected, you have the option to choose the fallback behavior. By default, No Results is selected as the fallback behavior, and no results are shown on the map. Optionally, select Preset Locations as the fallback behavior, and choose a location group to display on the map.
Display all Locations on map, Preset Locations, and Pre-set map center and zoom will all continue to work as expected.
Note: Even if Auto-Search is turned off, Bullseye will still display the gray image that designates the searcher's position on the map. If you want to remove this, contact Bullseye Locations and we can remove it for you.
Google Autocomplete: Select this option to use Google's autocomplete functionality. Autocomplete is a feature designed to make it faster to complete searches by suggesting locations as you begin to type.
Category: Optionally, if it is desired that users be able to filter results by category, they may be displayed as checkboxes or within a drop-down menu for selection. Find subscriptions also includes the ability to search by subcategories (this works for the drop-down option only), category groups, and category group subcategories. If using category groups, you can optionally require a selection by users before a search will be conducted. Select the appropriate option as needed.
Radius Options: Add or remove radii as needed. If you need to add a radius, simply 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.
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.
To configure Results, select the plus sign next to Results:
Display nearest Location when there are no results: Select this option if you want to display a single location that is closest when no results are found within the selected radius.
Display text when there are no results: 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.
To view the Display options, select the plus sign next to Display:
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(s). Multiple images can be uploaded and applied per category. 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. When you upload subsequent images, you’ll have the opportunity to select a category to apply the image to. If you want to display different Map Icons for different types of locations, you can assign a different map icon to each category. To make this work, you will simply need to upload a different map icon for each category and assign to the category. After you upload your 2nd map icon, you'll see an option to assign each icon to a category as in this screenshot:
Select the assign category option, and you'll see a list of categories to select from. Select the correct category for the image. Also, see Create and Modify Categories
Beneath the Custom Map Icons area, you'll see more options:
Categories in Results: Check this option to display the categories on locations when they are returned in the search results.
Promotions: Check this option if you want to include coupons/promotions on locations in the search results (Find subscription required also see Promotions ).
Events: Check this option to display Events on locations in the search results (Find subscription required also see Events).
Include Events Registration: Check this option to provide a form for leads to fill out and submit their info to an event (Find with Events Registration subscriptions required).
Contact Name and Position: This option displays the name/position of a person at the location if you provide this information when you set up the location.
Location Image: Include an image on the location by checking this option.
Phone Number: This option displays a "View Phone Number" link in results that must be clicked to reveal the phone number. This makes it possible to track phone number clicks.
Driving Distance: Display driving distance in addition to radius distance on results.
Local Landing Page: Display a link landing page/detail page for the location. The content for the landing page may be stored in Bullseye (Find subscription required).
Lead Capture: Display a link to a form for leads to fill out and submit to locations (A Lead Manager/Shared CRM subscription is required).
List View: Display a link on the search interface that opens up an SEO-friendly list view of all your locations.
Login/Edit Location Link: Display a link to allow locations to log in and manage their own data in Bullseye.
To view the Language option, select the plus sign next to Language:
You will see a checkbox to enable the language dropdown. 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 bilingual, 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. If you have the SEO subscription, you'll also have an SEO section available. To view the SEO options, select the plus sign next to SEO:
Location Identification: The SEO subscription automatically constructs SEO optimized landing page URLs. This option gives you the choice of using the internal Bullseye ID or a Third Party ID. If using Third Party ID, make sure all locations have a value in this field.,
Location name or keyword: When constructing the URL structure which will link to the landing page, you have the option of using the location's name or entering a custom keyword. If using a custom keyword, this keyword will be used in place of the location name in the query string. This can be helpful if you are optimizing locations on a particular keyword.
Title Tag: The title tag will be visible to search engines as the title of the interface. There is a similar option on each location that will be visible to search engines as the landing pages title.
Styles
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. See Working With Advanced Styles for usage instruction and examples for targeting elements and classes in your CSS, and Advanced Styles History to learn how to create different versions of advanced styles for testing or historical purposes.
Enable the "Show Attributes" checkbox in order to show custom attributes using CSS.
You can write your own CSS in the provided text field to override our CSS styles.
Publish
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 can design or paste your site's headers and footers into our interface page, and link to it. You can create a cName that points to the locator as well, so that the URL appears to be a part of your site.
You also have the option to embed the interface in an IFrame on your site or to. To generate the iFrame code that you can embed on the page, check the Enable iFrame embed for website checkbox. Enter the URL of the page you want to embed the locator on, and then click the Generate iFrame Code link.
Finally, let's look at the XML Sitemap section. If you have City and/or Local Pages configured, this option provides a link to an XML sitemap of your locations that you can submit to Google via your Search Console. A sitemap helps Google find and understand the hierarchy of your locations in order to provide relevant local search results. This helps your locations get found by people that search for your services in their area. You can opt to supress local pages on the sitemap if desired.
Once you're done, select Save at the top.