Geolocation Widget Tutorial

How does it look?

When you add the Geolocation Widget, your clients can see listings like the following:

Geolocation Widget Example
Geolocation Widget - Showcase
Geolocation Widget Example
Geolocation Widget - Carousel

How to set it up:

1. Select the default settings

  • Default radius: The default radius distance to display properties.
  • Distance unit: This widget contains an option to filter by distance. You can choose between miles or kilometers. Although the unit of measurement used by IDX Broker is miles, we handle the conversion of up to 15 kilometers.
  • Listings Type: Choose the type of listings that will be displayed on the map (all, featured or newest). If none selected, all listings will show up.
  • Max Days Listed: Maximum number of days when showing "newest" listings.
  • Listings Limit: Maximum number of listings to be shown

Default settings for the geolocation widget

2. Select the advanced settings (optional)

You can set some default listings for the listings that will be displayed, like the price, the sort order (eg Newest Listings), or even add an advanced field to only display properties with pool.

Advanced settings for the listings

3. Choose a Fallback Widget

Select one of your IDX Broker Legacy Widgets. It will be displayed if the leads doesn't allow location access.

Fallback widget selection

Take advantage of this feature to display some featured or newest listings.

Fallback widget example

4. Select the widget type for desktop and mobile

You can choose between a showcase or a carousel widget to display on desktop and mobile. For example, you could display the carousel version of this widget on desktop and the showcase version on mobile.

Widget type selection

5. Set a widget theme (optional)

You can add a theme to your widget. You can showcase some examples here

For this example, we will choose the "Houses 15" theme:

Houses 15 theme chosen

After selecting the theme, click on "Show color scheme" to display the available options. You can set the different colors, according to the selected theme. Notice that only some colors will be applied to certain elements, depending on the selected theme. Once you're happy with your selection, click on "Save Color Scheme".

Set a primary theme

If you want to use only one theme (recommended), just select the theme and click on "Set As Primary Theme".

Set Primary Theme

When you select the Primary Theme, you will see this message. You can always change the default theme later.

Primary Theme message

Note that changing the Default theme will not change the theme your website widgets are already using. This setting is used only for making it easy for you to find the theme you used before.

Primary Theme set

6. Copy the New Code

Once you've made your selection, click on the Copy Code button and it will be copied to your clipboard.

Copy widget

7. Paste the New Code

You can now paste the new code where you want the widget to be displayed.