Shortcodes Settings - Showcase Widgets

Page Builder Shortcodes

Showcase IDX offers a number of different widgets to help customize your site and get your clients the information they need.  In this article, we'll highlight what each of those widgets does and how to make the best use of them.

You can also find more information a video tutorial of these instructions.

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

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 on to a page on your website. No coding 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.

• The search widget is a great way to introduce your 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 your 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. You can find more information about how to add a search widget to your page here. 

   

  
  
  

  Customization Options

  1. Apply Search: Apply a saved search to the search widget, ensuring that pre-determined filters are send 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 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 your site.

  We strongly suggest adding a search widget to your home page. If your clients cannot locate your 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.
  

• 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.

  

  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.
  
  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!

• 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.

  AVAILABLE 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 your 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

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

  

• The Contact Form Widget provides you with call-to-action functionality anywhere on your site.  When a user fills out the form and submits it, you will get an e-mail with the contents of the widget, allowing you the ability to quickly follow up with your user's questions.
  
  The Contact Form 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 your IDX Control Panel.
  

• The Market Value widget works in a similar way to the contact widget, allowing users to fill in a form that will be sent directly to your associated e-mail address, with all the relevant data available to you for quick responses.  Route these leads using the Settings > LEAD ROUTING settings.
  The Market-Value widget can be used 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. Leads who fill out this form are labeled as a Seller.
  

• The Mortgage Calculator widget is a simply mortgage calculator that can be added to any page on your website. Having a mortgage calculator can help buyers get a view into 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. 
  

• 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 links 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 your site to always know where to find their search dashboard, listings, and searches. So by placing the links in a top bar above your main header, they can always be accessible. This gives you a way to have people sign up from any page on your website. It is designed to automatically display the signup/in modal over your 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 your website’s user experience.

  How do I do it?

  1. Adjust your widget with the available options.
     
     
  2. Copy the Shortcode
  3. Go to your theme in your WordPress admin, and find if they allow a configurable top bar to your navigation header. This might require a bit of custom coding if your theme doesn’t support it, but many do at this point. Follow the instructions from your theme to add content to your 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 your theme. You should be done!

  Heres 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)