Make your own Zillow Mortgage widget using ASP.net & C#

The last time I posted on Geek Estate, I wrote about how to use the Trulia API from a PHP page. Since watching mortgage rates fall is a lot more fun than watching home prices fall, I decided to implement a simple widget that uses the recently released Zillow Mortgage API. This time, I’m using Microsoft’s ASP.net framework instead of PHP (mainly because it’s the platform I program in professionally, I just dabble in PHP for fun). Anyway, ASP.net is a free web application development platform that comes with Windows and there are many web hosting companies that offer inexpensive ASP.net hosting plans.

If you don’t have a geeky disposition, you could take the easy way out and just use one of the “pre-built” Zillow built mortgage rate widgets. Of course, if you did that, you’d be missing out on the ability to change the layout, performance, appearance of your widget to your precise & exacting specifications. Maybe you want to use your brand’s colors instead of Zillow’s on your mortgage rate widget? Maybe you want your mortgage rate widget to display colored up or down arrows? Maybe your clients don’t speak English, and you need mortgage rates displayed in the language your clients speak more fluently (French, Spanish, Chinese, etc)? Maybe you want to implement it as an IE 8 Web Slice – so visitors can subscribe to your mortgage rate widget? Maybe the economy has you considering a career in software development? Anyway, I’m just saying there are many reasons why somebody would go through the trouble of writing their own widget.

In order to use the Zillow API, you need to get a Zillow Web Services ID (a/k/a ZWSID) for your application. After you have your ZWSID, you can call Zillow’s Web Services from your web applications, and start integrating the data they return into your web site. Anyway, here’s what my mortgage rate widget looks like. Creating a widget isn’t difficult. The toughest part is getting the data from Zillow’s Web Services into your web page. I’ve uploaded the ASP.net / C# source code for my Zillow Mortgage Rate widget, so you can go straight to the fun parts. If you look at the GetRateSummary function in my ZillowDemoPage class (it’s in the Zillow.aspx.cs file inside of the uploaded zip file), you’ll see how I got the data from Zillow’s Mortgage Rate Summary API.

See more mortgage rates at Zillow.

Before you use this code on your web site, you’ll need to replace the zwsid variable with your Zillow Web Services ID (a/k/a ZWSID) key. Essentially, the code makes an HTTP request to Zillow’s GetMonthlyPayments web service, it creates an XML document from the response, and then I use a few XPath expressions to get the data out of the XML document that Zillow returns. After we get the data from Zillow’s Web Service, I place the result in a MortgageRates object and determine whether rates are going up or down. Then the ASP.net view engine uses the data in the MortgageRates object in the Zillow.aspx page, and essentially does a search & a replace with certain markup in that file with values in the MortgageRates object, until it generates the final result you see above.

I have a few helper functions that help me determine if rates are going up or down, and help draw the up and down arrows in the right colors, but it’s pretty easy compared to making the web service call. If you are an alpha geek, you may wonder why I’m using CSS classes which I didn’t define (e.g. hslice, entry-title, entry-content, ttl, etc) inside of my widget. Well, this particular widget uses a new IE 8 feature called Web Slices, (which is similar in spirit to the Web Clip feature in Mac Safari). This way my sites visitors can subscribe to the mortgage rate widget in IE 8, and can get updated rates sent right to my browser toolbar without even going to the site. Anyway, the Zillow APIs are free to use and the only requirement besides getting a ZWSID key, is having your widget meet their branding requirements.

This essentially the code I used for developing the mortgage rate widget on Real Property Associates web site. The one I developed for RPA, caches mortgage rate quotes for 10 minutes, so I don’t waste web server resources (both mine & Zillow’s) by asking for mortgage quotes on every page load, and the Zillow branding at the bottom matches their web site’s color scheme better. Aside from that, it’s pretty much the same. Happy coding!