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 the option List View with Map on Top (Responsive). You'll be taken to the Options screen:
Note that your site does not need to be responsive in order for you to implement a responsive locator. We assume that you will be using the responsive option, and have this option checked in the example.
If your site is responsive, we suggest leaving the Page Max Width field blank. The interface will adapt correctly. If your site is not responsive, but you'd like to use our interface, you'll need to set the page max-width according the maximum width that is set on your site. Just type it in.
The Map Height should be set to somewhere between 210-400 pixels depending upon your preference or space limitations. You can upload a Custom Map Icon which will be used to designate each location on the map. We will resize the image so you don't need to worry about making a very small image to exact dimensions. Just browse to the image and upload. Next, configure the Search Options:
We allow companies to show all countries with locations for each interface, or to manually select individual countries. The latter allows you to suppress countries from the search where you have locations, since some companies use multiple interfaces to provide multiple locators within a single account. In some cases, an interface may only apply to selective countries.
Results Options control the appearance of the locations when they are returned in a search:
Results Per Page can be configured to display between 1 and 20 results. If you have Categories, you can select to display them in the search results. Note that, you don't need to let users search by categories. You can merely display them on the locations when results are returned, or include them in the results along with making them a searchable option.
Coupons can be displayed on locations in the search results for Web Premium accounts, and we offer an optional additional service that allows you track coupon prints, and provide coupon fraud detection as well (contact us for more info). Select this option if you'd like to offer coupons in the search results.
Events are also offered for Web Premium accounts, allowing companies to display events such as product demos that take place in stores. Check this option if you'd like to display events.
Contact Name and Position as well as Location Image can be turned on if you'd like them to display in the search results. For Location Image, 100x100 is the suggested image size, which will be displayed in the location list and map bubble. The image needs to be square.
Local Landing Pages also apply to Web Premium accounts, allowing companies to display a detail page with additional location content. This gives extra information about the location for the user, which may include a gallery of images, and a variety of other information. Landing Pages can also be used for SEO purposes. We provide the ability to include title tags and a Meta Description which can be crawled by the search engines along with the additional content that is provided. If you are looking to gain some SEO value from the landing pages, it is best to implement the pages under the domain of the website. Contact us for more information.
The Lead Capture option requires a Lead Management and Web Premium Subscription. This feature presents a link to contact a location. When this link is clicked, they are presented with a form to fill out. After they submit the form, the lead information is sent to the location the user selected in an email. The location can follow up with the lead, and your company can track the follow up.
The Login/Edit Location link will only become visible by turning on this option in Settings>Setup>Options. Select the option Allow Location Registration and this option will become available. If you select to display this link, it will become active on your search page. You can direct your locations to the link to register for the locator, so that locations can add themselves on a self serve basis.
When you are done with the Options tab, select Styles, you'll see the screen below:
Under Basic Template, 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.
Next, select the Publish option. You'll see the screen below.
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'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.