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!
Comments [0]