Since joining forces with Ben about 6 months ago, we have had a blast creating and testing out new features (both internal and public). Along the way, we have iteratively improved the flexibility of our widget styling, core Javascript, and backend services to make customization easier.

We feel that it’s time to start exposing some this flexibility outside of the founding team here at Olark. Why? Well, it turns out that we are hitting a pretty broad range of customers: ecommerce sites, small businesses, realtors, freelancers, lawyers, and more. You can imagine that each of these customers has specific needs for their business.

The most-requested features definitely get our full attention, but obviously we can’t incorporate every idea that comes our way. So now we invite you, the designers and developers of the world, to start working with us. If you’re setting up a website with Olark, you can customize the look and behavior to fit the specific needs for your business.

Our first step is offering full CSS styling, for designing custom themes. Designers can get access to this immediately from our plans page. We are still testing out pricing models for this, and right now we ask that you keep our branding intact. Please give us your feedback!

Our next step is a new Javascript API, for developing custom behaviors. With the current version of the API, you can do basic plugins like the example below. This example changes the visitor screen name to their geolocation. Instead of seeing “webuser1234” in your buddy list, you will see “Mountain View, CA, USA” or “London, UK”.

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOURGOOGLEJSAPI_KEY"></script>
<script type="text/javascript">

var config = wc_config();

if (google && google.loader && google.loader.ClientLocation) {
    config.vars.force_nickname = ""+
        google.loader.ClientLocation.address.city+", "+
        google.loader.ClientLocation.address.region+", "+
        google.loader.ClientLocation.address.country;
}

wc_init("YOUR_HABLA_SITE_ID", config);

</script>

Over the next month, we will be releasing an upgraded Javascript API to allow easy triggers for important events (e.g. shopping cart failures) and simple hooks into our message system, with jQuery at the core. If you are a developer and have some great ideas of what you would like to see, please get in touch with me on my Olark at mjpizz.com or on Twitter.

-Matt @mjpizz

I’d really like some feedback on the latest IE6 feature push. The previous Javascript based method of placing Hab.la in a window seemed a bit jumpy, and not really that responsive. I rewrote the JavaScript that causes Hab.la to stay in the corner as you scroll your web-page. Now Hab.la will follow you around in a much smoother fashion. Let me know what you guys think of this.

IE6 has some limitations, but we try our best to mitigate them :-).

A little bit more detail on the problem: Essentially Hab.la can’t float in the corner in IE6 because IE6 does not support FIXED positioning. I.e. unlike IE7, Firefox, Opera, and Safari IE doesn’t support the position: fixed CSS tag. There are many methods of mitigating this problem, including many CSS Hacks. We wanted to stay away from CSS Hacks, which require a separate CSS file because we couldn’t depend on the CSS styles rendering for all the dynamic DOM content in Hab.la.

If you a search on Google you’ll notice this is a pretty common problem. In any case, the old method was to update the position of the Hab.la div whenever you scrolled, or resized the window. This created really choppy transitions when users were doing a lot of scrolling, but more closely mocked up fixed:position.

In the new method, which I adapted from http://www.codingforums.com/showthread.php?p=637753 Instead of monitoring events such as window.onscroll or window.resize. We just monitor the window every 500ms to see if we need to change the location of the Hab.la DIV. When a change is necessary, instead of immediately moving the div to the correct location, we smoothly move the div the desired location exponentially approaching the desired X,Y coordinates. [The above is pretty much what I found in coding forums, but the guy writing that post definitely didn’t write his code so it could be read by others – and has some extra steps that aren’t really necessary.]

In short, IE6 users, please let me know if you think the smooth fixed positioning via JavaScript is a useful improvement.

We have made a few small fixes that should greatly improve how Hab.la renders in IE7 and IE6. Over the weekend we also made some improvements that have sped up average response times and lowered the processing power required to process each visitor to your site.

The next step ‘backend’ wise will be incorporating memcached into the setup to reduce mysql hits, which will also make the setup easier to scale as needed.

A long time ago I demonstrated that you could wrap Hab.la in Yahoo UI. Well now you can wrap Hab.la in Yahoo UI, and have it look good at the same time.

The below example code is a complete hack, but uses an unmodified version of the main wc.js and a resizeable YUI panel to make a pretty nice Hab.la Window that you can drag around.

I don’t think it would be too hard to take this code, and wrap it up so that anyone could switch their Hab.la window over to the ‘cooler’ YUI version.

Hab.la + YUI == nice!

Probably my favorite aspect of web development is the fact that you get to do everything twice: once for IE6, and once for everything else. Anyhow, no one had actually tested hab.la in IE yet.

I was going to write a hilarious narrative about the wacky bugs I faced to day, but I'm tired so let's get to the point: IE was caching the RPC calls. I added no-cache headers and it basically works. There's a bizarre new bug now where incoming messages show up three times, but I'm sure we'll figure that out soon enough.

I also updated the JS client to use David's hot new chatbox look.

I was going to do some benchmarks today, but I guess I'll hit that up later.