The Listings Showcase widget is used to display listing thumbnails and information together in a row, column or grid on a page or section of your site---it's a powerful, modern-looking tool that is very useful for quickly showing visitors properties they might be interested in.
- Creating a new Listings Showcase Widget
- Configuring a Listings Showcase Widget
- Adding a Listings Showcase Widget to Your Site
Creating a new Listings Showcase Widget
To create a new Listings Showcase widget you'll want to first login to your IDX Broker account and be on your IDX Broker Dashboard in your browser. Once you're logged in, on the left you'll want to click into Design > Widgets > New:
Once you're on the New Widgets page, click on the top right "Create New" button:
And finally locate the "Listings Showcase" widget. You can click on the triangle to the right of the "Create Widget" button if you want to start out with a widget preconfigured to show your Featured, Featured Sold or Supplemental listings; otherwise you can just click on "Create Widget" to get started.
Configuring a Listings Showcase Widget
Right after you create a new Listings Showcase widget or when you click on the "Edit" tool next to the widget you want to modify, you'll be presented with a column of options on the left with a preview section on the right. The preview section will update automatically as you make changes on the left so you can easily see how your widget will look when it's added to your page.
Listings Showcase Options
- Name: an internal name for your widget. This isn't displayed to the user, so use something that makes sense to you like 'Expensive Listings in Example'
- Heading: a header to display over the widget. The user will see this, so use a title that will make sense to your visitors.
- Location: a city, county or postal code that should be used to filter listings by. For best results, start typing in the location you want to use then click on the matching name or code that appears in the dropdown menu.
- Location List: a location list already setup on your account to filter listings with. You'll want to use Location Lists when there are multiple cities, counties or postal codes you want to limit listings to at once. You can read more about creating a Location List on this page of our support site.
- Status: whether to filter listings to those considered "Active" or "Sold." Keep in mind that this refers to the basic Active or Sold status within the IDX Broker system which, depending on the MLS used on your account, can each be comprised of multiple statuses that appear on listings in your feed. If you want to filter listings to those that have specific statuses beyond Active or Sold you'll want to make use of the 'Edit By Hand Query' Advanced Setting located lower on this page.
- Price: the minimum or maximum price of listings that will appear within the widget
- Minimum Bedrooms, Bathrooms and Square Footage: the minimum number of bedrooms, bathrooms or square feet that a listing must have to appear within the widget.
- Sort Order: what order listings should be sorted and displayed in with the widget.
- Max Number of Columns: how many columns up to a maximum of five that the listings should be arranged in.
- Max Number of Listings: the maximum number of listings that should be displayed at once through the widget
- Open Links in New Window: setting this to "Yes" will mean a new tab or window will be opened when a visitor clicks on a listing or 'View All' link shown by the widget. With it set to "No" the same tab or window the visitor already has open will be used instead.
- Display View All Results Link: setting this to "Yes" will make the widget include a 'View All' link in a row above the displayed listings that a user can click on to look at the more general search results for the search criteria used by the widget.
- Layout: (Engage only) can be set to 'Overlayed' if you want listing details to be displayed over the photo thumbnail of the listing or set to 'Below' if you would prefer the details to be below the thumbnail instead.
- Colors: (Engage only) the colors that should be used for various parts of the widget.
Near the bottom of the list of options is a toggle to show or hide Advanced Settings.
Listings Showcase Advanced Settings
- Edit by Hand Query: this is a powerful setting that should be modified with care---you can use it to filter listings by more advanced fields that might not be available above, like the MLS ID, specific property statuses, property types and subtypes, and more! if you're not quite sure how to change this yourself, make sure to keep a backup of what was set and working before you make changes so you can always go back to a working version of the plugin. You can read more about how the Edit by Hand Query setting works on this page of our support site.
- Custom CSS: allows you to include additional CSS to be used when the widget is embedded on your page. The widget is created in a way that prevents external CSS from affecting it, so you'll want to use this field when you have custom CSS you want to apply to the widget's style.
- Fields to Display: (Engage only) allows you to select what information should be shown for each listing displayed by your widget including Bed, Bath, Sq Ft, Acres, Subdivision, Price, Status, Address, New Listing Banner, Open House Banner, Price Reduced Banner, and Virtual Tour Banner. Each field can be enabled or disabled separately but due to space considerations some may override others, so make sure to double check the widget preview on the right when making changes.
- New Listing Banner Threshold: (Engage only) the maximum number of days that this widget should use when deciding to show the New Listing banner, if enabled.
Once you've setup your widget as your like, click on the "Save" button at the bottom of the settings column to save the widget to your account:
Adding a Listings Showcase Widget to your site
After you've finished setting up your widget, you will see a prompt like the following indicating you to use the menu for your widget to get the embed code:
To get this code, on the 'New' Widgets page (located at Design > Widgets > New) locate the row that corresponds to the widget you've created and click on the downward pointing triangle on the far right:
Then click on "Copy Code":
You'll then see the code that you will want to copy and paste into your site to use the widget:
Make sure to copy and paste the code exactly as it is and make sure it's added as HTML when editing your site. If you're not sure how to do that, you may want to reach out to your web host or designer or developer if you have one for assistance, as exactly what needs to be done to add the widget to your site can vary depending on how your website is built and setup.
Previewing a Listings Showcase Widget
With the same "Tools" menu, you can also click on "Preview" to see how the widget looks with the wrapper for your IDX Broker account which can give you an idea of how the widget will appear on your site without making site changes right away.
Upgrading a Legacy Showcase Widget to a New Listings Showcase Widget
If you have a Legacy Showcase widget already created within your account, it's possible to upgrade it into an equivalent New Listings Showcase widget. The upgraded widget will make use of any applicable settings from the legacy widget like its search criteria and sorting order, so this can save you some time if you've already been using IDX Broker for a while and would like to make use of this new feature. However, it's important to keep in mind that due to differences in how the New Listings Widget is built any custom CSS from the legacy widget will not be carried over.
To upgrade one of your Legacy Showcase widgets, first open up the Legacy Widget page from your Dashboard by clicking into Design > Widgets > Legacy:
Now on the Legacy Widgets page, locate the row that corresponds to the Showcase widget you would like to upgrade. On the far right of this row, click on the refresh icon:
After clicking on the icon you'll be prompted to confirm the upgrade by clicking on the "Save Changes" button. If you have a Platinum level account, you'll also be able to choose the new widget's layout:
Finally, once the widget has been upgraded you'll find the new widget on the New Widgets page under Design > Widgets > New and can make use of it or customize it further as you see fit.
The original Legacy Showcase widget will still be available on your account, so you're free to switch back to that widget, upgrade it again to create another New Listing Showcase widget or delete it if you like.