JavaScript Quick Start
Place the following Javascript anywhere on your page…
1 2 3 4 5 6 7 8 | <script type="text/javascript" src="https://cdn.visualidx.com/js/featuredlisting.js"></script> <script type="text/javascript"> var myOptions = { targetURL : '/mydetailspage/' }; var myFeaturedListing = new wsm.visualidx.featuredListing('featuredListing',myOptions); </script> |
Then wherever you want the Visual IDX Featured Listing to appear on your page, either…
1 | <div id="featuredListing"></div> |
…or to create a custom Featured Listing, use custom HTML inside the target div like…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div id="featuredListing"> <div> <span id="featuredCity"></span> - <span id="featuredClass"></span> </div> <a id="featuredImageLink"></a> <img id="featuredImage"> <p class="caption">MLS # <span id="featuredMLS"></span> | <span id="featuredPrice"></span> | <a id="featuredListingLink"></a> View Details | <a id="featuredEmailLink"></a> Email Us About This Listing </p> <div id="featuredRemarks"></div> </div> |
NOTE* – To further customize the style of the featured listing, you can either override the default styles for the VisualIDX Featured Listing in your site’s primary stylesheet. Or you can call the VisualIDX Featured Listing widget with the ‘css’ option set to your own custom stylesheet. Like…
1 2 3 4 5 6 7 8 9 | <script type="text/javascript" src="https://cdn.visualidx.com/js/featuredlisting.js"></script> <script type="text/javascript"> var myOptions = { css : 'https://mycustomsite.com/myfeaturedstylesheet.css', targetURL : '/mydetailspage/' }; var myFeaturedListing = new wsm.visualidx.featuredListing('featuredListing',myOptions); </script> |
Possible Options for the Featured Listing tool are…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | myOptions = { agentID : '', // Comma-separated list of valid agent IDs. contactemail : '', // Required if you have an 'Email about this listing' link. This can be set to any valid email address city : '', // City to limit listings to css : 'https://cdn.visualidx.com/css/featuredlisting.css', // User definable emailsubject : 'Please send more information regarding MLS #', fields : 'mls,remarks,class,city,area,price,bedrooms,bathrooms,s3picCount', limit : 1, mls : '', // List of MLS addresses to cycle through. ie '123456' or '123456,654321'. This list excludes all other filters. mlsand : '', // Similar to the 'mls' option, but includes the list of mls #s with a Logical AND. So can be used with other filters officeID : '', // Same idea as agentID, but limit by office ID(s). openhouse : '', // Set to 'true' to display only those MLS properties with an Open House propertyclass : '', // Residential, MultiFamily, Land, FarmRanch and/or Commercial. Default is All if none specified pmin : '', // minimum price if you want to set it pmax : '', //maximum price if you want to set it prevNextButtons : 1, // Whether to show the 'prev' and 'next' buttons overlaying the photo. 1 is on. 0 is off. picTracker : 1, // Whether to show the 'Showing picture x of x'. 1 is on. 0 is off. pubdate : '', // Show listings added or modified since a certain pubdate. Format is 'yyyy-mm-dd' for listing on of after a specific day or e.g '-14' (for past 14 days) refreshRate : '16000', // Frequency (in milliseconds) that the featured listing is rotated. remarksLimit : 0, // Length of the remarks paragraph. Default 0 = unlimited. subdivision : '', // Select a particular subdivision. targetURL : '/mydetailspage/?a=b', // this is the page on your site where you'll send users for details about the property. You'll need to set up that page. transition: 'fade', // The jQueryUI effect to use to rotate listings. Can be 'fade', 'slide', 'flash' or 'none'. Note - 'none' stops the listing from changing. width : '100%', // Percent of parent element to fill up zip : '' // Limit listings to a particular 5-digit zip code. } |
We see a lot of Featured Listing widgets on home pages, either as full width sliders, or as block elements below the fold. Additionally, we see the Featured Listing widget in many sidebars.
The Featured Listing widget is also a perfect tool for Real Estate Advertising. The Featured Listing widget is just a few lines of lightweight javascript an HTML, so can be used in Ad systems like Google Adwords (note* – WSM is an Authorized Google AdWords partner) or Adbutler. A good example of the Featured Listing widget for Real Estate Advertising is in the Real Estate Section of DurangoDowntown.com where it used to promote Real Estate Advertising Durango
USES
Most sites use custom HTML inside the HTML target div of the Featured Listing widget. The most important component of the custom HTML is to keep the element ID’s consistent with the default HTML of the tool.
NOTE* – The targetURL option
- The ‘targetURL’ option of the Featured Listing will take the end user to an IDX search page, to an SEO Flyer page, or anywhere else you want to send it.
- When a user clicks the Featured Listing, the destination page of the targetURL option will have the Request Parameter ‘mls=123456’ (where ‘123456’ is the MLS # of the listing being featured) appended to it. So if your targetURL is ‘/details’/, then the actual URL will be ‘https://myrealtysite.com/details/mls=123456
Display a random listing from entire MLS
Place this code anywhere on your page…
1 2 3 4 5 6 7 8 | <script src="https://cdn.visualidx.com/js/featuredlisting.js"></script> <script> var o1 = { emailsubject : 'Please send me more information regarding MLS #' }; var l1 = new wsm.visualidx.featuredListing('featuredListing',o1); </script> |
…and then this in the BODY of your page where you want your Featured Listing to display.
1 | <div id="featuredListing"></div> |
Display a random listing with default styling from a single Broker.
1 2 3 4 5 6 7 8 9 | <script src="https://cdn.visualidx.com/js/featuredlisting.js"></script> <script> var o1 = { emailsubject : 'Please send me more information regarding MLS #', agentID : '1234' }; var l1 = new wsm.visualidx.featuredListing('featuredListing',o1); </script> |
…and then this in the BODY of your page.
1 | <div id="featuredListing"></div> |
Display just a random listing image from a single Broker with broker ID 1234. Use custom HTML inside the target DIV.
Place this in the HEAD of your page.
1 2 3 4 5 6 7 8 9 | <script src="https://cdn.visualidx.com/js/featuredlisting.js"></script> <script> var o1 = { emailsubject : 'Please send me more information regarding MLS #', agentID : '1234' }; var l1 = new wsm.visualidx.featuredListing('featuredListing',o1); </script> |
…and then this in the BODY of your page.
1 2 3 4 5 | <div id="featuredListing"> <a id="featuredImageLink" href="#"> <img id="featuredImage" alt=""> </a> </div> |
Note : the featured image link will, by default, point to ‘mls.php’. Be sure and specify the targetURL option if you want to direct the link elsewhere.
Display a random listing, with custom layout, from a specific Brokerage with price between $500,000 and $750,000, and with a link target of ‘listingDetails.asp’.
Place this in the HEAD of your page.
1 2 3 4 5 6 7 8 9 10 11 12 | <script src="https://cdn.visualidx.com/js/featuredlisting.js"></script> <script> var o1 = { officeID : '1234', emailsubject : 'Please send me more information regarding MLS #', pmin : '500000', pmax : '750000', targetURL : 'listingDetails.asp' }; var l1 = new wsm.visualidx.featuredListing('featuredListing',o1); </script> |
…and then this in the BODY of your page.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="featuredListing"> <div style="clear: both;"></div> <a id="featuredImageLink"></a> <img id="featuredImage" alt=""> <p class="caption"> MLS # | | <a id="featuredListingLink"></a> View Details | <a id="featuredEmailLink"></a> Email Us About This Listing </p> <div id="featuredRemarks"></div> </div> |
Display TWO random listings from a brokerage – one with propertyclass ‘RESIDENTIAL’, and another with propertyclass ‘LAND’.
Place this in the HEAD of your page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script src="https://cdn.visualidx.com/js/featuredlisting.js"></script> <script> var o1 = { officeID : '1234', emailsubject : 'Please send me more information regarding MLS #', propertyclass : 'Residential' }; var o2 = { officeID : '1234', emailsubject : 'Please send me more information regarding MLS #', propertyclass : 'Land' }; var l1 = new wsm.visualidx.featuredListing('featuredListing_1',o1); var l2 = new wsm.visualidx.featuredListing('featuredListing_2',o2); </script> |
…and then this in the BODY of your page.
1 2 | <div id="featuredListing_1"></div> <div id="featuredListing_2"></div> |