Info Windows

An info window is the popup that appears when a customer clicks a marker on the map. Store Locator Map: SE provides full control over the content, layout, and styling of info windows so they display the most relevant information for your customers.

Default Info Window Content

By default, the info window displays the following fields:

• Location name
• Full address
• Phone number
• Business hours (current day)
• "Get Directions" button

You can customize which fields are shown and in what order.

Configuring Info Window Fields

Selecting Visible Fields

1. Open the app and go to Settings > Map > Info Window.
2. In the Fields section, toggle each field on or off:

Field	Description	Default
Location name	The name of the store.	Shown
Address	The full street address.	Shown
Phone number	Displayed as a clickable link on mobile.	Shown
Email	Contact email address.	Hidden
Website	Link to the location's webpage.	Hidden
Hours (current day)	Today's operating hours.	Shown
Hours (full week)	The complete weekly schedule.	Hidden
Open/Closed status	Whether the store is currently open or closed.	Shown
Distance	Distance from the search point.	Shown
Description	The location's description text.	Hidden
Tags	Tags assigned to the location.	Hidden
Featured image	The location's primary photo.	Hidden
Custom attributes	Any custom fields configured for the location.	Hidden
Amenities	Amenity badges or icons.	Hidden

3. Drag fields to reorder them within the info window.
4. Click Save.

Field Display Options

Some fields have additional display options:

• Phone number -- Choose to show as a clickable tel: link (default) or plain text.
• Website -- Choose the link text: "Visit Website," the actual URL, or a custom label.
• Hours -- Show only today's hours, or expand to show the full weekly schedule by default.
• Distance -- Display in miles, kilometers, or the unit matching the customer's search.

Get Directions Button

The "Get Directions" button is a key action element in the info window. When clicked, it opens a directions request in the customer's preferred mapping application.

Behavior

Platform	Action
Desktop browser	Opens Google Maps in a new tab with directions from the customer's search location to the store address.
iOS device	Opens Apple Maps by default (can be configured to open Google Maps if installed).
Android device	Opens Google Maps.

Configuration

1. Go to Settings > Map > Info Window.
2. Under Get Directions, configure the following:

Setting	Description	Default
Show button	Toggle the "Get Directions" button on or off.	Enabled
Button label	Customize the button text (e.g., "Get Directions," "Navigate," "Take Me There").	"Get Directions"
Directions origin	Use the customer's search location or prompt them for a starting address.	Search location
Travel mode	Default travel mode for the directions request: driving, walking, transit, or bicycling.	Driving

Additional Action Buttons

You can add other action buttons to the info window alongside "Get Directions":

Button	Description
Call	Initiates a phone call to the location's phone number (mobile devices).
Email	Opens the customer's email client with the location's email pre-filled.
Visit Website	Opens the location's website in a new tab.
Share	Allows the customer to share the location via the browser's native share dialog or copy a link.
Custom URL	A configurable button that links to a custom URL (e.g., appointment booking, product catalog).

Styling the Info Window

Built-in Style Options

Setting	Description	Default
Background color	The info window's background.	White (#FFFFFF)
Text color	Primary text color inside the info window.	Dark gray (#333333)
Accent color	Color for links, buttons, and highlights.	Inherited from widget primary color
Border radius	Rounded corners on the info window container.	8px
Max width	Maximum width of the info window popup.	320px
Shadow	Drop shadow around the info window.	Subtle shadow

Configuring Styles

1. Go to Settings > Map > Info Window > Style.
2. Adjust the settings using the controls or enter values directly.
3. Preview changes on the sample map.
4. Click Save.

Custom CSS

For advanced styling, add CSS rules targeting the .se-info-window class and its child elements:

.se-info-window {
  font-family: 'Inter', sans-serif;
  padding: 16px;
}

.se-info-window__name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.se-info-window__address {
  color: #666666;
  font-size: 13px;
}

.se-info-window__directions-btn {
  background-color: #1a73e8;
  color: #ffffff;
  border-radius: 4px;
  padding: 8px 16px;
}

Add custom CSS in Settings > Widget > Advanced > Custom CSS.

CSS Class Reference for Info Windows

Class	Element
.se-info-window	Root container of the info window.
.se-info-window__name	Location name heading.
.se-info-window__address	Address text.
.se-info-window__phone	Phone number link.
.se-info-window__email	Email link.
.se-info-window__hours	Hours display section.
.se-info-window__status	Open/Closed status indicator.
.se-info-window__description	Description text block.
.se-info-window__image	Featured image container.
.se-info-window__actions	Action buttons container.
.se-info-window__directions-btn	Get Directions button.
.se-info-window__tags	Tags list.
.se-info-window__amenities	Amenities section.

Custom Content

Add free-form HTML content to the info window for use cases not covered by the standard fields.

1. Go to Settings > Map > Info Window.
2. Scroll to Custom Content.
3. Enter HTML in the content area. You can use placeholders for dynamic location data:

Placeholder	Replaced With
{{name}}	Location name
{{address}}	Full address
{{phone}}	Phone number
{{email}}	Email address
{{website}}	Website URL
{{hours_today}}	Today's hours
{{distance}}	Distance from search point
{{tags}}	Comma-separated tag list

4. Choose whether custom content appears above or below the standard fields.
5. Click Save.

Info Window Trigger

Configure how the info window is opened:

Option	Description	Default
Click	The info window opens when the customer clicks a marker.	Selected
Hover	The info window opens when the customer hovers over a marker (desktop only; falls back to click on touch devices).	--

Set this at Settings > Map > Info Window > Trigger.

Next Steps

• Custom Markers -- Configure the marker icons that customers click to open info windows.
• Widget Customization -- Adjust the overall widget appearance including location cards.
• Map Styles -- Customize the map's visual theme.