Javascript Quick Start
Put the following Javascript anywhere on your page.
1 2 3 4 5 | <script src="https://cdn.visualidx.com/js/visualidx.js"></script> <script> var myOptions = { }; var s1 = new wsm.visualidx.propertySearch('MyVisualIDX',myOptions); </script> |
…and then this code where you want the VisualIDX Real Estate Search tool to display in the BODY of your page…
1 | <div id="MyVisualIDX"> </div> |
The above code will validate that the client’s url is a valid url, and if so will insert the VisualIDX Real Estate Search tool into the specified DIV (i.e. MyVisualIDX).
Possible Parameters for the Options Object 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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | var myOptions = { activeTool : 'grid', // Default tool to show. 'grid','map' or 'list' agentID : '', // limit the search to an agent's listings amin : '0', // default minimum acres amax : '1000', // default max acres amaxInit : '1000' // used when we need to revert to a safe number for 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 : 'https://cdn.visualidx.com/css/hotsheet.css', // default style sheet. Can be 100% user defined detailstarget : '', // Target URL when +Details button is clicked emailTo : '', // Target Email address for inquiries emailToListingAgent : false, // send email requests to listing agent instead of website owner emailToName : '', // Descriptive name of the email recipient - like <Julian Ching> for [email protected] features : '', // Comma-separated list of features that can be in the keywords field ['ADACOMPLIANT','Fireplaces','Garage','GreenEnergyGeneration','HorseSetup','IrrigationWater','Pool','ShortSale','Views','VirtualTour','Waterfront',newconstruction] flyer : '', // url (relative or fqdn) of flyer tool if exists. Important for printing. google_adword_conversions : { // Google Analytics and AdWords both allow conversion tracking. Add codes here. 'view' : '', 'details' : '', 'share' : '', 'contact' : '' }, googleanalytics : 'https://www.googletagmanager.com/gtag/js?id=UA-137824613-1', // URL for current Google Analytics library googleapikey : '', // Add your own Google Maps API key if helpful or necessary. googleUA : '', // google UA number for statistics gridbreakpoints : { // widths, in pixels, where the grid chooses to be 1 grid to 5 grids across. A class if x or xx etc is added to the wrapper depending on these breakpoints. Styling can then be handled 100% in the stylesheet. 'x' : '0', 'xx' : '500', 'xxx' : '800', 'xxxx' : '1100', 'xxxxx' : '1400' }, group1 : '3', // number of listings to pull in first group group2 : '10', // number of listings to pull in 2nd group h : '', // Deprecated hash salt. Must be turned on at the server level first. Otherwise useless, and returns null. html : 'https://cdn.visualidx.com/html/hotmap.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 lease : '', // [true|false} Default is false lat : '', // default latitude for center of map latmin : '', latmax : '', listhubid : '', // If client wants ListHub tracking, add tracking id here listhubtest : '', // Set to true if you want to test listhubid on test site before tracking goes live listingstatus : '', // Active, Contingent, New or BackOnMarket lng : '-107.032238', // default longitude for center of map lngmin : '', lngmax : '', limit : '21', // default number of listings to show. 1st round will use group1 and group2 plus remainder. subsequent rounds will grab the full limit each pass listingstatus : '', // Active, Contingent, New or BackOnMarket mapSource : "https://maps.googleapis.com/maps/api/js?v=3&sensor=true&key=", // Google URL for maps mapZoom : 12, // Default Zoom level for maps mls : '', // comma separated list of mls numbers. Only those listings will display. mlsand : '', // List of MLS numbers to include as a Logical AND to whatever filters apply. The 'mls' option is exclusive by comparison. mouseboxcss : '', // nextLimit : 20, // When loading next group of listing as scroll to bottom is reached. newconstruction : '' // [true|false] flag to only show listings with status "New Construction" officeID : '', // limit search to listings from a particular Brokerage openhouse : '', // Set to 'true' if you want to only display those listiungs with a coming Open House orderby : 'Price DESC', // default search order of listings paginationOffset : '', // Default is 0, change if for some reason you want to start pagination at a different listing photobase : '', // Default = https://crenphotos.visualidx.com/, but photos could be pulled from elesewhere photolimit : '', // Limit # of photos for each listing price : '', // Set price to something specific prange : '', // Set to Price Range i.e. 250000-300000 pmin : '0', // default price minimum in dropdown pmax : '20000000', //default price maximum in dropdown propertyClass : 'ALL', // [RESIDENTIAL|LAND|COMMERCIAL|FARMRANCH|MULTIFAMILY|ALL] 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) sharingurl: '', 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] showToggle : true, // whether to show the "map" and "list" buttons for toggling back and forth. searchFormTarget : 'myVisualIDXSearch', // Target div where we want to put the search form. searchFormOptions:{ css : wsm.visualidx.urls.hotmap.root+'/css/searchform.css', html : wsm.visualidx.urls.hotmap.root+'/html/searchform.html', initFormMinimized: true, priceAcresSqFt_input : 'select', //resultsObject: parent, searchFormSource : wsm.visualidx.urls.hotmap.root+'/js/searchform.js', searchFormTarget : 'myVisualIDXSearch' // Target div where we want to put the search form. }, searchFormPassThroughOptions : ['agentID','amin','amax','areas','background','bathrooms','bedrooms','borderRadius','debug','features','googleUA','google_adword_conversions','horsesetup','iconColor','keywords','lat','lng','limit','mls','officeID','orderby','price','prange','pmin','pmax','propertyClass','select2','select2css','showSearchForm','sfmin','sfmax','width','zip'], //select2 : wsm.visualidx.urls.hotmap.root+'/lib/select2/select2.min.js', select2 : wsm.visualidx.urls.hotmap.root+"/lib/select2-4.0.3/select2.full.min.js", select2css : wsm.visualidx.urls.hotmap.root+"/lib/select2-4.0.3/select2.min.css", slickcss : wsm.visualidx.urls.hotmap.root+'/lib/slick/slick.css', slickthemecss : wsm.visualidx.urls.hotmap.root+'/lib/slick/slick-theme.css', socialbox : wsm.visualidx.urls.hotmap.root+'/js/socialbox.js', socialboxcss : wsm.visualidx.urls.hotmap.root+'/css/socialbox.css', sortorder : '', sfmin : '0', // default square footage minimum sfmax : '10000', // default square footage maximum sfmaxInit : '10000' // used when we need to revert to a safe number for SqFt target : 'myHotsheet', // target div where you want to put the hotsheet (results) targetUrl : '/details/', // Target URL for Details if SEO FLyers are installed and enabled type : '', // Detailed type - [ Stick Built | Condo \ Townhouse | Manufactured\Mobile | Modular | Condo | Townhouse | CondoTel ] url : '', // For alternate & compliant API data source. Good Luck. virtualTour : false, // limit results to those properties with virtual tours waterfronttype : '', // filter results by 'true' for all waterfronttypes, or [ Pond | River/Stream | River | Creek | Seasonal Stream/Spring | Lake/Reservoir |Other ] width : '100%', // default css width zip : '', // Filter listings by zipcode. shortcut for i.e. "areas : 'zipcode:81301'". zoom : 14 // Default gMaps zoom level for the google maps } |
* NOTE
All options can be called as query parameters rather than being specified in an options object.
I.E.
1 2 3 | options = { mls = '123456' } |
…is equivalent to…
1 | http://yourrealtywebsite.com/mypropertysearch/?mls=123456 |
WordPress Quick Start
On the page where you want the VisualIDX Search displayed, place the following shortcode on the page…
1 | [visualidx_search] |
The above shortcode will display the default implementation of the VisualIDX Real Estate Search tool.
However, you can add attributes to the shortcode that correspond to the available Javascript options.
i.e. To display listings from a particular Brokerage, you can use the ‘officeid’ attribute.
1 | [visualidx_search officeid="1234"] |
*NOTE – WordPress requires shortcode attributes to be lower case, where as the options of the same name in the javascript options object can be mixed uppercase and lowercase, and are case-sensitive.
The following attributes are available for the VisualIDX Shortcode for Search:
- activetool – [ grid | list | map ] – the default display for search listings
- agent – typically a 4-digit code that the agent/broker was assigned by the local MLS
- agentid – same as ‘agent’, for compatibility
- amin – minimum number of acres – i.e. if this =5, then only result >= 5 acres will display
- amax – max number of acres – i.e. if this = 5, then only result <= 5 acres will display
- area – Area as defined by CREN or another MLS. i.e. ‘Durango Rural’
- areas – Areas vis-a-vis WSM. i.e. Subdivision:Tamarron:Durango, or Subdivision:Durango West:Durango. Must have an area type (County,City,Subdivision,SchoolElementary,SchoolMiddle,SchoolHighSchool,Zipcode) and then the actual name exactly as it appears in the database. For many – like subdivisions, will also want the city, since several cities can have same subdivision. */
- background – Any CSS-compliant background designation like “#ffffff” or “rgba(255,255,255,1)” or even “url(https://mysite.com/background.png)”
- bathrooms – minimum # of bathrooms
- bedrooms – minimum # of bedrooms
- borderRadius – numeric value for border radius of search form elements
- css – the css file to use. This defaults to the VisualIDX CSS file at https://cdn.visualidx.com/css/hotmap.css
- features – specify a commas separated list of the following – ;horsesetup’, ‘garage’, ‘views’, ‘waterfront’, ‘irrigationwater’
- fields – choose which search fields to display in the search form. Use the form field IDs
- html – the html template file to use. Defaults to https://cdn.visualidx.com/html/hotmap.html
- iconColor – defines the icon color in the search form – any CSS compliant color – i.e. ‘#000000’ or ‘rgba(0,0,0,1)’
- initFormMinimized – choose to show just the top row of search form options, or all 10
- jquery – choose an alternate jQuery library version
- jqueryui – choose an alternate jQuery UI library version
- keywords specify a keyword to search for – i.e. ‘granite’ or ‘hottub’
- lat – starting latitude for the center of the map
- lng- starting longitude for the center of the map
- limit – default # of listings to display per chunk of search results
- mls – list of comma-separated mls #’s
- newconstruction – [true | false] choice to display only “New Construction”
- officeid – display listings from a specific brokerage. Typically a 4 digit numer
- orderby – default is ‘price ASC’. Other options are ‘price DESC’, ‘LastModifiedDateTime DESC’, ‘GreenData DESC’, ‘Bedrooms’, ‘Bathrooms’, ‘SquareFootage’, ‘Acres’ & ‘Year Built’
- price – specify and exact price for the results
- prange – specify a hyphenated price range for the search results. i.e. 300000-500000
- pmin – specify a min price for the listing results
- pmax – specify a max price for listing results
- propertyClass – specify the MLS-defined property class for results. options are ‘Residential’, ‘Land’, ‘MultiFamily’, ‘LandRanch’ or ‘Commercial’
- searchFormSubmit – whether or not to show the search form ‘Search’ button. False by default. Turn this on when displaying the form without the results.
- showSearchForm – whether or not to show the search form. full|mini|none|[array,of,search,form,element,ids]
- sortorder – specify ASC (ascending) or DESC (descending) for the search results
- sfmin – specify a min squarefootage for the listing results
- sfmax – specify a min squarefootage for the listing results
- subdivision – specify a default subdivision for search results
- target – specify a target page for the print function. Default is a modal popup window, but an SEO Flyer page is another powerful option
- virtualTour – only display listings with Virtual Tours
- width – specify the width of the outer VisualIDX div. Default is ‘96%’. Can be any valid CSS3 width in % or px
- zip – specify a zipcode for the search results
* NOTE
All options can be called as query parameters or shortcode parameters rather than being specified in an options object.
I.E.
1 2 3 | options = { mls = '123456' } |
…is equivalent to…
1 | [visualidx_search mls='123456'] |
…or…
1 | <h4>https://yourrealtywebsite.com/mypropertysearch/?mls=123456</h4> |
*NOTE – The VisualIDX shortcodes for WordPress are an abstraction layer for the Javascript. So any request parameters of the page URL, or after-the-fact modifications via Javascript will still work.
Examples
Show all listings with Agent ID of 1234. Display the Map-view by default.
Javascript
First the JavaScript – typically in the HEAD portion of your page.
1 2 3 4 5 6 7 | <script src="https://cdn.visualidx.com/js/visualidx.js"></script> <script> var options_1 = { agentID : '1234', activeTool : 'map' }; var s1 = new wsm.visualidx.propertySearch('VisualIDX',options_1); </script> |
…and then the HTML in the BODY of you page, where you want VisualIDX to display.
1 | <div id="VisualIDX"></div> |
WordPress
Do the same thing, but utilizing the WordPress plugin
1 | [visualidx_search agentid="1234" activetool="map"] |
QueryString
Do the same thing, but utilizing the QueryString
1 | https://myrealtywebsite.com/listings/search?agentid=1234&activetool=map |