JavaScript Quick Start for VisualIDX Hotsheet
In the ‘head’ section of your page…
JavaScript
1 2 3 4 5 6 7 | <script type="text/javascript" src="http://cdn.visualidx.com/js/hotsheet.js"></script> <script type="text/javascript"> var myHotsheetOptions = { agentID : '1234' }; var myHotsheet = new wsm.visualidx.hotsheet('myHotsheet',myHotsheetOptions); </script> |
Then wherever you want the Visual IDX Hotsheet to appear on your page
either…
The VisualIDX Hotsheet tool is intended for those pages where you’d like to display a targeted list of properties that have specific features.
For instance, Hotsheets are a great way to display just your listings, or just listings with certain features like Virtual Tours, horse properties or certain price points.
Possible options are…
JavaScript
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | options = { agentID : '', // limit the search to an agent's listings amin : '0', // default minimum acres amax : '10000', // default max acres area : '', // Mapping only. Consult Web Services Management. areas : '', // Coming in from the search form. Can be anything from school districts to Counties. ie. Area:Durango%20In%20Town:Durango background : '', // Any CSS-Compliant background color. i.e. '#fff' or 'rgba(255,255,255,.6)' bathrooms : '0', // default minimum number of bathrooms bedrooms : '0', // default minimum number of bedrooms borderRadius: '4px', css : 'http://cdn.visualidx.com/css/hotsheet.css', // default style sheet. Can be 100% user defined emailToListingAgent : false, // send email requests to listing agent instead of website owner features : '', // Comma-separated list of ['ADACOMPLIANT','Fireplaces','Garage','GreenEnergyGeneration','HorseSetup','IrrigationWater','Pool','ShortSale','Views','VirtualTour','Waterfront'] flyer : '', // url (relative or fqdn) of flyer tool if exists. Important for printing details. googleUA : '', // google UA number for statistics group1 : '3', // number of listings to pull in first group group2 : '10', // number of listings to pull in 2nd group html : 'http://cdn.visualidx.com/html/hs.html', // default html template. Can be 100% user defined. iconColor : '#666', // Color for the input field icons in the search form. jquery : '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', // jQuery library to use jqueryui : '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', jQuery-UI library to use keywords : '', // default value of keyword search lat : '', // default latitude for center of map lng : '', // default longitude for center of map limit : '20', // default number of listings to show. 1st round will use group1 and group2 plus remainder. subsequent rounds will grab the full limit each pass mls : '', // comma separated list of mls numbers. Only those listings will display. nextLimit : 20, // When loading next group of listing as scroll to bottom is reached. officeID : '', // limit search to listings from a particular Brokerage orderby : 'Price DESC', // default search order of listings pmin : '0', // default price minimum pmax : '20000000', //default price maximum propertyClass : 'ALL', // [RESIDENTIAL|LAND|COMMERCIAL|FARMRANCH|MULTIFAMILY|ALL] pubdate : '', // Show istings 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) shortSale: 'false', // Set to true if you want to list shortsales showSearchForm : 'full', // whether or not to show the search form. full|mini|none|[array,of,form,element,ids] sfmin : '0', // default square footage minimum sfmax : '40000', // default square footage maximum target : 'myHotsheet', // target div where you want to put the hotsheet (results) virtualTour : false, // limit results to those properties with virtual tours width : '100%', // default css width zoom : 14 // Default gMaps zoom level for the google maps }; |
* NOTE
All options can be called as querystring parameters in addition to being specified in an options object.
Example:
1 2 3 | options = { mls = '123456' } |
…is equivalent to…
http://yourrealtywebsite.com/myflyer.php?mls=123456
Examples
Show all listing from Agent 1234 in the past week
JavaScript
1 2 3 4 5 6 7 | <script> var myHotsheetOptions = { agentID : '1234', pubdate: '-7' }; var hs1 = new wsm.visualidx.hotsheet('myHotsheet',myHotsheetOptions); </script> |
…and then this in the body of your page where you want the QuickSearch to display.
Show all Residential listings with Price between $1,000,000 and $1,500,000.
JavaScript
1 2 3 4 5 6 7 8 | <script> var myHotsheetOptions = { pmin : 1000000, pmax : 1500000, propertyClass : 'Residential' }; var hs1 = new wsm.visualidx.hotsheet('myHotsheet',myHotsheetOptions); </script> |
…and then this in the BODY of your page.
1 |
Display only listings from Office 123 that have Virtual Tours.
Place this in the HEAD of your page.
JavaScript
1 2 3 4 5 6 7 | <script> var myHotsheetOptions = { virtualtour : true, officeID : 123 }; var hs1 = new wsm.visualidx.hotsheet('myHotsheet',myHotsheetOptions); </script> |
…and then this in the BODY of your page.
1 |