Your Partner Handbook for Showcase IDX

IDX Control Panel > Settings > Shortcodes

  • Updated

Find your widgets under your Settings menu in your IDX Control Panel. Select Shortcodes from the dropdown. 

Screen_Shot_2018-02-13_at_2.12.30_PM.png

 

Showcase IDX offers a number of different widgets to help customize a site.

You can also find more information in a video tutorial.

You are able to customize most widgets right on the page builder shortcodes page. The customization options update the shortcode for you on the page, making it easy to simply copy and paste the code onto a page on a website. No coding is necessary! 

You will also see a preview of the widget on the page. This allows you to see exactly how the widget will look on your website. Updating the customization options will also update the preview.

Note

Widgets are responsive to their container size. The container of the IDX Control Panel is full-width. If you put your widget in a smaller container, the widget will adjust in size to fit nicely inside the container.

Search Widget

The search widget is a great way to introduce users to the power of the IDX search system in a compact, easy-to-customize widget. We strongly suggest agents use a search widget on their home page. This allows website visitors to quickly and efficiently conduct a search and increases chances of converting them to a lead. You can also use this widget in a sidebar if you want to include the search on other pages with limited space. 

 

Screen_Shot_2022-05-12_at_4.21.03_PM.png

Customization Options

  1. Apply Search: Apply a saved search to the search widget, ensuring that pre-determined filters are sent to the search along with whatever is selected in the widget itself (useful if you plan on hiding any of the filter options so only certain properties are shown)
  2. Add Margin to Form / Add Padding to Form: Particularly useful when using the widget in the sidebar, these two options will allow you to assign a pixel value for margin and padding to the form to make sure it looks perfect when in responsive containers
  3. Add Corner Radius to Form: Perfect for when you like those rounded edges; will add rounded corners to the buttons and the entire form, allowing for round-button styles
  4. Include Advanced Search: Adds the Advanced Search filters drop-down box to the form, allowing for filtering via advanced features such as Pool and Pets
  5. Exclude Beds/Baths/Types/Price/Locations: Customize exactly what options are available for the search widget.  Only deal with luxury listings?  Get rid of the price box so only your selected price range is available for users.  Want just a search button (for instance when you have a specific saved search tied to the widget)?  Exclude everything and see just the blue search button (which you can customize the text of in the following option).  Pick and choose which ones are best for your site
  6. Customize Search Button Text: Replace the magnifying glass with the custom text of your own

Preview the widget at the very bottom of the screen to get a sense of what it will look like when added to the site.

We strongly suggest adding a search widget to your home page. If clients cannot locate a property search, they are more likely to bounce and head to Zillow or Redfin. Here is a great example of a search widget on a home page.
Screen_Shot_2022-05-16_at_4.40.20_PM.png

Search Button

The search button widget gives you the ability to create a button that can be linked to any saved search. Clicking the button sends the website user to the default search page with the listing results for the assigned saved search. If you don't apply a search to the button, it will redirect the user to your default search page and display random listings. Additionally, you can change the text on the button to something more relevant to the applied search.

Screen_Shot_2018-11-15_at_3.41.15_PM.png

You can use this widget in multiple ways. One way is by adding a search button to your home page, instead of a search bar widget. You could make it say "Search Now" or something similar, like the image below.
Screen_Shot_2022-05-16_at_4.47.21_PM.png
Another way to use this widget is within pages to promote visitor clicks. Apply a search to the widget, update the text, and add it to a blog post or another page! This will prompt visitors to interact with the search!

 

Map Widget

The map widget works best when paired with a saved search.  It makes for a great semi-interactive header for community pages and can be a nice addition to pages where specific areas are highlighted.

Screen_Shot_2018-02-13_at_3.02.09_PM.pngAVAILABLE CUSTOMIZATION OPTIONS

Apply Search - Works similarly to the search widget function of the same name. This will allow you to choose from a pre-made saved search in the search library to display listings and the map from that search.  This works with polygon searches as well, allowing you to draw a polygon in a saved search and have it show up in the map widget.  If you do not apply a search to the map widget, it will inherit the settings from your default search appearance map

Set Height - Set the height in pixels for the map.  It is responsive and will adjust the width to whatever container you put it into

Exclude Features - Just want a beautiful map and nothing else?  Exclude all the map tools from the map.  Each button is independent. For example, you can allow the satellite button while hiding the draw and zoom tools

Sign In Widget

The Sign-In widget allows you to have a registration and sign-in portal for the home search anywhere on the site.  Fully responsive and modal-capable.

Screen_Shot_2022-07-14_at_1.13.07_PM.png

Contact Form

The Contact Form widget provides you with call-to-action functionality anywhere on the site.  When a user fills out the form and submits it, the agent will get an e-mail with the contents of the widget, allowing them the ability to quickly follow up. The Contact widget also serves as a lead routing source, allowing you to send submissions of this form to a specific e-mail address using the SETTINGS > LEAD ROUTING settings in the admin dashboard.
Screen_Shot_2022-07-14_at_1.18.48_PM.png

Market Value Form

The Market Value Form widget works in a similar way to the contact widget, allowing users to fill in a form that will be sent directly to the associated e-mail address, with all the relevant data available to you for quick responses.  The Market-Value widget can be used as a completely separate lead-routing source, as well, allowing you to send the submissions to a different e-mail address utilizing the Showcase IDX lead routing system.
Screen_Shot_2022-07-14_at_1.19.28_PM.png

Mortgage Calculator

The Mortgage Calculator widget is a simple mortgage calculator that can be added to any page on a website. Having a mortgage calculator can help buyers get a view of what their monthly mortgage might be if purchasing a particular property. This mortgage calculator doesn't take into account other costs, like closing costs, property taxes, etc. Agents also have the option to display a mortgage calculator on every listing page by toggling on the setting in the Display Settings
Screen_Shot_2022-08-18_at_10.21.08_AM.png

Navigation Links

We’ve given our customers the ability to take the IDX navigation links out of the main search container. You can add a separate IDX navigation link to a top bar on your website to give a fully integrated user experience on your WordPress website that is more like what you’d see on very expensive custom websites or portals like Zillow and Realtor.com. You want the consumers on a site to always know where to find their search dashboard, listings, and searches. So by placing the links in a top bar above the main header, they can always be accessible. This gives you a way to have people sign up from any page on the website. It is designed to automatically display the signup/in modal over the content on any page! By putting the link in the navigation top bar it significantly reduces the visual clutter in the search area. It gives a cleaner look that dramatically improves the website’s user experience.

How do I do it?

  1. Adjust the widget with the available options.

    Screen_Shot_2020-12-03_at_10.04.01_AM.png
  2. Copy the Shortcode
  3. Go to the theme in the WordPress admin, and find if they allow a configurable top bar to the navigation header. This might require a bit of custom coding if the theme doesn’t support it, but many do at this point. Follow the instructions from the theme to add content to the top bar.
  4. Go back to the Navigation Links page in the Agent Admin and grab the CSS snippet that is on that page. This will hide the default (in-app) links so you’re only showing one set of links. It doesn’t look great if you keep both links, we highly recommend against keeping them both.
  5. Paste this CSS into your Custom CSS field Settings>Design or in the theme. You should be done!

Here's a quick video of those custom options in action. This website is using ARK theme.

But wait, there’s more!

You can also individually style each of the links. So if you want to make a more prominent button out of the Sign Up link you can! The class names are:

  • sidx-header-link-search (main search)
  • sidx-header-link-dashboard (dashboard)
  • sidx-header-link-listings (saved listings)
  • sidx-header-link-searches (subscribed searches)
  • sidx-header-link-profile (sign in / profile)