Thoughts on live chat 
Sign up | Plans | Help | Contact
Tags


Filed under

images

 
December 4, 2007

Fancier Online/Offline images for all

A few months ago Roland made some really cool online/offline images for people on myspace and other sites that block javascript to use when hab.la enabling their website.

At the time we were rewriting a lot of the core JavaScript, so recently this took a back seat to core functionality.

Below you will find the HTML code necessary to add hab.la to your website (no javascript required), be sure you change the fields labeled SITE_CODE, to your site code found in the My Hab.la Page.

(Once installed on your site, clicking on the produced image will create a link to hab.la where your visitors will be able to chat with you.)

Online
Offline 
<div>
<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://dyn.hab.la/online/image.cgi/SITE_ID_HERE/1.gif" border=0></a><br/>
<small>Powered By <a href="http://hab.la" target="_blank">Hab.la</a><small>
</div>

Online
Offline 
<div>
<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://dyn.hab.la/online/image.cgi/SITE_ID_HERE/2.gif" border=0></a><br/>
<small>Powered By <a href="http://hab.la" target="_blank">Hab.la</a><small>
</div>

Online
Offline 
<div>
<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://dyn.hab.la/online/image.cgi/SITE_ID_HERE/3.gif" border=0></a><br/>
<small>Powered By <a href="http://hab.la" target="_blank">Hab.la</a><small>
</div>

Online
Offline

Hidden when unavailable

<div>
<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://dyn.hab.la/online/image.cgi/SITE_ID_HERE/4.gif" border=0></a><br/>
<small>Powered By <a href="http://hab.la" target="_blank">Hab.la</a><small>
</div>

Online
Offline 
<div>
<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://dyn.hab.la/online/image.cgi/SITE_ID_HERE/4.gif" border=0></a><br/>
<small>Powered By <a href="http://hab.la" target="_blank">Hab.la</a><small>
</div>

For information on how to use your own custom images, take a look at the below blog post.

http://hab.la/articles/2007/10/19/online-offline-image-the-simple-way

[We are still working on a clean method of performing the same tasks using just javascript – in that we just haven’t got around to it]

Filed under  //   away   frontend   hab.la   image   images   javascript   livehelp   myspace   no   offline   online  

Comments [0]

October 18, 2007

Custom Online and Offline Images... The simple way

Ok, I’ve seen a lot of people looking for an option to show whether you are offline or online without javascript. (Ok a lot meaning, just a few) First, you’ll need to know your site-ID.

You can find this in My Hab.la, it will be in the javascript for your site. wc_init("THIS_NUMBER_IS_YOUR_ID")

Now here’s the trick:

The Code: 

<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://images.async.hab.la/status/SITE_ID_HERE/image.png?online=ONLINE_IMAGE_URL
&offline=OFFLINE_IMAGE_URL" border=0></a>
<!-- be sure to remove the spaces when you paste the code -->

An Example: 

<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://images.async.hab.la/status/SITE_ID_HERE/image.png?
online=http://www.griffith.k12.in.us/*Beiriger/FROGS/frog.jpg
&offline=http://www.epa.state.il.us/water/conservation-2000/lake-notes
/aquatic-plant-management/images/lilly-pad.gif" border=0></a>

This Produces:


i.e. A frog when someone at Hab.la is online, or a lily-pad when we are gone. I think you can see how this same method could be extended for offline/online status on any page that doesn’t support javascript. We’ll have longer tutorial for creating an offline/online image that work with the javascript later.

This same method can be used for placing a hab.la link on myspace. [However, they don’t let you include images with ‘?’ if I remember correctly. They might now even like .cgi URLs.. in any case for Myspace you can probably do the below:]

<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://images.async.hab.la/status/SITE_ID_HERE/image.png" border=0></a>

Which will produce:

Filed under  //   cgi   dynamic   hab.la   images   javascript   myspace   no   offline   online  

Comments [0]