Anywhere on the the page…
1 2 3 4 5 6 7 | <script type="text/javascript" src="http://cdn.visualidx.com/js/flyer.js"></script> <script type="text/javascript"> var myFlyerOptions = { officeID : 123 }; var myFlyerObject = new wsm.visualidx.flyer('myFlyer',myFlyerOptions); </script> |
Then wherever you want the Visual IDX Flyer Generator to appear.
either…
1 | <div id="myFlyer"> </div> |
or something like…
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 | <div id="visualIDXFlyer"> <img id="flyerHeaderImage" style="display: none; float: left;" src="/flyer/flyer-header.png"> <div id="propertySummary" class="noBreak"> <img id="propertyImage" class="propertyImage" src="https://cdn.visualidx.com/media/images/1x1.png" border="1" scale="0"> </div> <div id="mlsPriceHolder"> <span id="propertyMLS">MLS # </span> <span id="propertyPrice"></span> </div> <div id="propertyRemarksWrapper"> </div> <div id="propertyAddressHead"> </div> <div id="contactFooterSection"> <span id="myFooterPic"> <img src="/images/me.png"> </span> <div id="contactSection"> <ul> <li><strong>JULIA PICOLINO, Associate Broker</strong></li> <li style="list-style-type: none;"></li> <li>P.O. Box 1234, Durango, CO 81301</li> <li>(970) 903-3431</li> <li>julia@juliasamazingbrokerage.com</li> <li>http://juliasamazingbrokerage.com</li> </ul> </div> <div id="listingQRCodeDiv"> <img class="mlsreplace" alt="QR Code for _mlsreplace_" scale="0" src="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chld=|0&chl=http%3A%2F%2Fm.juliasamazingbrokerage.com%2Fdetails%3Fmls%3D_mlsreplace_" > </div> </div> <div id="propertyCourtesySection"> </div> <div id="propertyDisclaimerSection"> </div> </div> <!-- /#flyer --> |
NOTE* – Our VisualIDX Flyer/SEO tool is a Premium upgrade to our standard service. Our Flyer/SEO tool is tightly integrated with your website, Google’s Search Engine’s, and your SEO goals, and requires significant management and maintenance in order to keep the tool optimized, and your site ranking high in the search results. Please Contact Us to license the Flyer/SEO tool for your website.
The most reliable way to implement our Flyer/SEO tool is through the use of our VisualIDX WordPress plugin. If you don’t already have a link to our VisualIDX plugin, contact us.
To implement the VisualIDX Flyer/SEO tool on your website:
- Download, install & activate the VisualIDX WordPress plugin.
- Create a new blank page on your site. We recommend using SEO rich terms for the name of this page. The page slug will be used thousands of times to display individual Real Estate listings. So if, for example, you want to specialize in Denver Real Estate, then name this new page something like “Denver Real Estate Listings”. However, make sure the new page title is distinct from any other page titles.
- After saving your new page, copy the ‘page slug’ from your newly created page, and navigate to VisualIDX Setting page in the WordPress Admin
- Past the page slug into the “Flyer Page Slug” options field.
- Contact WSM to help you create the appropriate Sitemaps for your business model, area and SEO goals
- Submit those sitemaps to Google Search Console and Bing Webmaster Tools.
- Verify that your Sitemaps and Flyer pages work.
- Verify the Flyer pages print correctly, making sure that your website’s CSS isn’t overwriting the Flyer page’s default styling
Possible options are…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | options = { agentID : '', // To limit the results to just the listings of a particular agent city : '', // Limits the results to a city i.e 'Durango' county : '', // Limites the results to a particular county. i.e. 'Archuleta' css : 'http://cdn.visualidx.com/css/flyer.css', // You can manually create and specify the stylesheet fields : '', // The fields to pull from the VisualIDX data source hideOnPrint : '', // The ids of the DOM elements to hide on print html : 'http://cdn.visualidx.com/html/flyer.html', // The HTMl file to use as the template for the flyer mls : '', // specify a specific mls number of a property to display. This overrides ALL other search conditions. officeID : '', // limit results to a particular officeID. i.e. '123' propertyclass : '', // limit results to a particular propertyClass. Can be any combination of Residential, Multifamily, Commercial, FarmRanch or Land. If blank, then 'All' is assumed. pmin : '', // set minimum price of properties in search pmax : '', // set maximum price of properties in search printcss : 'http://cdn.visualidx.com/css/flyer-print.css', // stylesheet that controls print layout showOnPrint : '', // hidden DOM ids that should be made visible on print subdivision : '', // limit search to a particular subdivision width: '95%', // default width of parent element that the flyer should expand to zipcode : '' // limit search to a particular zipcode }; |
* 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/myflyer.php?mls=123456 |
*Note – the Flyer/SEO page is typically called with the MLS # in the QueryString as mls=123456. If no MLS # is specified in the QueryString, the Flyer tool will call a random listing from the MLS, respecting any additional filters specified in the Options object or the QueryString.
Display a random listing from entire MLS using Javascript
1 2 3 4 5 | <script type="text/javascript" src="https://cdn.visualidx.com/js/flyer.js"></script> <script type="text/javascript"> var myFlyerOptions = {}; var myFlyerObject = new wsm.visualidx.flyer('myFlyer',myFlyerOptions); </script> |
…and then this in the BODY of your page.
1 | <div id="myFlyer"></div> |
Note* – The Options object can be empty. And because most flyer pages are called with the MLS # in the Query String, there’s rarely a need to specify the MLS # via the ‘mls’ option.
Display a random listing from a single Office.
1 2 3 4 5 6 7 | <script type="text/javascript" src="https://cdn.visualidx.com/js/flyer.js"></script> <script type="text/javascript"> var myFlyerOptions = { officeID : 123 }; var myFlyerObject = new wsm.visualidx.flyer('myFlyer',myFlyerOptions); </script> |
…and then this in the BODY of your page.
1 | <div id="myFlyer"></div> |
Display a random listing from a single Office, but pull in a different HTML template and a different stylesheet.
1 2 3 4 5 6 7 8 9 | <script type="text/javascript" src="https://cdn.visualidx.com/js/flyer.js"></script> <script type="text/javascript"> var myFlyerOptions = { officeID : 123, html : 'http://myrealtywebsite.com/templates/myflyertemplate.html', css : 'http://myrealtywebsite.com/templates/css/myflyerstylesheet.css' }; var myFlyerObject = new wsm.visualidx.flyer('myFlyer',myFlyerOptions); </script> |
…and then this in the BODY of your page.
1 | <div id="myFlyer"></div> |
*Note – By deault the Flyer/SEO pages are called with the MLS # in the URL of the page, like https://myrealtywebsite.com/real-estate-listing/123456/123-main-avenue-mycity-mystate-zipcode/mycity-real-estate/mystate-real-estate/. If no MLS # is specified in the URL, like https://myrealtywebsite.com/real-estate-listing/, the Flyer tool will call a random listing from the MLS, respecting any additional filters specified in the Options object or the QueryString.
Display a random listing from entire MLS using the WordPress Shortcode
1 | [visualidx_flyer] |
Display a random listing from a single Office.
In the content section of your WordPress page…
1 | [visualidx_flyer office="1234"] |
Display a random listing from a single Office, but pull in a different HTML template and a different stylesheet.
In the content section of your WordPress page.
1 | [visualidx_flyer office="1234" html="http://myrealtywebsite.com/templates/myflyertemplate.html" css="http://myrealtywebsite.com/templates/css/myflyerstylesheet.css"] |
