I’ve put together a tutorial for all the folks that use LiveJournal. Unfortunately they insist on blocking JavaScript, meaning the tutorial sets up a badge that users click on first to initiate the Hab.la window. Not the best option— but c’est la vie…

Also, we’ve added a page for third parties to showcase their plugins and tutorials… so if anyone is so inclined, they can add their super swanky Hab.la plugin or the like by posting to the forum here.

Now all our Blogger friends can add Hab.la easily using our Blogger Tutorial Let me know if something doesn’t make sense…

Thomas Edison thought that everyone should answer the telephone with “Ahoy”, my Hab.la greeting of choice is “Yola”. I digress.

I just pushed a few new simple – but much requested features to production they include: welcome message support, automatically expanding the Hab.la window when a operator sends a message to a visitor, and a really cool method of supporting offline/online images. The last of these features could use a full tutorial.. I’ll put that on to the todo list :-)

Welcome Message
The welcome message is shown in the Hab.la window before chat is started.

<script type="text/javascript" src="http://static.hab.la/js/wc.js"></script>
<script type="text/javascript">
config = wc_config();
config.vars["welcome_msg"] = "Hi Traveler, You can use this window to chat with me as you browse my website :-).";
wc_init("___YOUR__ID____",config );
</script>

Automatically expanding the Hab.la window when a chat is received.
When enabled this feature will expand the hab.la window when an operator sends a message to a website visitor. (In normal operation, the hab.la window remains minimized unless the visitor clicks on it).

<script type="text/javascript" src="http://static.hab.la/js/wc.js"></script>
<script type="text/javascript">
config = wc_config();
config.vars["expandOnMessageReceived"] = 1;
wc_init("___YOUR__ID____",config );
</script>

Showing or Hiding Content based on Hab.la Availability.
We’ve made it really easy to show and hide content on your webpage based on whether hab.la is available or not. For example, when you are not available on hab.la you might want to show a contact form, when you are available, you might instruct your visitors to chat with you using hab.la. In addition you can use this same method to show or hide a “click here to chat with me” link or image.

Once you have the hab.la javascript installed on a page all you have to do is to create two HTML Divs, “habla_available_div”, “habla_unavailable_div”. (if you want a div to be shown when hab.la is loading create “habla_loading_div”).

<div id="habla_available_div"></div>
<div id="habla_unavailable_div"></div>
<!-- optional -->
<div id="habla_loading_div"></div>
<!-- /optional -->

Now, you can place content in these DIVs that will show based on your hab.la availability

Example 1: Showing and hiding some text based on availability

<div id="habla_available_div">Hey I am online on hab.la, see that little chat box in the lower right, you can click on it to talk to me instantly.</div>
<div id="habla_unavailable_div">I am not here like now, looks like you missed me.</div>
<!-- optional -->
<div id="habla_loading_div">Hab.la is starting up</div>
<!-- /optional -->

Example 2: Showing and hiding images based on availability

<div id="habla_available_div"><A href="javascript:habla_window.show()"\>"<img src="online_image.png"></a></div>
<div id="habla_unavailable_div"><A href="contact_us.html"\><img src="offline_image.png"></div>

That’s today’s list of features and improvements. Enjoy!

My last blog post talks about how you can link to hab.la from websites that don’t support JavaScript (i.e. eBay and Myspace). I’ve taken that blog post and converted it into a tutorial page, here, to make it easier to read and fill out.

In other news, site owners using Hab.la now have two options when it comes to changing the nickname displayed when they are chatting with site visitors.

Using Account Settings

1. Log into Hab.la
2. On the “my Hab.la” page select “settings”
3. Change the ‘Nickname’ value
4. click ‘update’

Using JavaScript

Replace your existing Hab.la code with the below code:

<script type="text/javascript" src="http://static.hab.la/js/wc.js"></script>
<script type="text/javascript">
config = wc_config();
config.vars["local_name_override"] = "Your display name";

wc_init("___YOUR__ID____",config );
</script>

I spent today honing my Google gadget writing skills. Unfortunately Google Gadgets that work on Google Pages are wrapped in IFRAMES so I couldn't make a gadget to embed the floating Hab.la into your Google page. (Though you can still paste the HTML into Google page) We need to do a little bit more testing before we add the Gadget to the various Google Gadget directories. The below link is pretty much useless, as it will just add the Hab.la widget to your iGoogle web page.

What you really want to do is log into your google pages account (Pages.Google.com) and edit a page on your site, near the bottom of the screen is an [Add Gadget link], choose to add a gadget from a URL, and as the URL specify: http://static.hab.la/html/habla_gadget.xml
 
You'll need your Hab.la Site-ID which can be found on your account page, pull out the series of numbers passed to the wc_init() function. If you examine the code wc_init("___THIS_IS_YOUR_ID___")

That's it for now, in other news I've been revamping the JavaScript API that drives the display of hab.la on your page, and pretty soon there will be documentation explaining all the cool things you can do with your hab.la window.

One last thing, the MySpace and BlogSpot Hab.la tutorials are on their way :-)

I spent some time updating the Hab.la Pidgin tutorial so that it now correct for the most recent version of Pidgin. (It was bad luck that the GAIM/Pidgin folks had to go and release a new version of Pidgin right after I wrote the first tutorial) In any case there is a new tutorial for getting started with Hab.la using pidgin.

In other news the Hab.la front page will now detect what OS you are using and customize some of the text based on what OS your running. (i.e. we no longer emphasize iChat if your running Windows)