Widget tweaks

• facebook

As you might have noticed, we've recently pushed out a new version of the widget. Notable changes:

1. Improved sound feature.
2. New default English text for online widgets.
3. Widget is 30% of its original size, so it downloads even faster now.
4. Widget has real-time presence, except in older versions of IE.
5. Port 5280 no longer required for presence (good for restricted network environments).
   

To run these down in more detail...

1) Sound. The previous sound solution behaved a little sloppily if you wanted to have sound on by default, and the patron's browser did not have Flash installed. It displayed an error message in that case, and that looked cosmetically untidy in narrow widgets. The new sound solution is backed by jPlayer, a jQuery plugin, and doesn't display any error messages if Flash is not installed.

Sound-on-by-default is an option now in the Design Public Services wizard. If you prefer to do things by hand, it's explained here, in the widget customization section of our docs.

2) New default English text for online widgets. Formerly, this was, "Type here to chat." Now it is, "Type here to chat. Press ENTER to send." This change was made in response to usability tests done at a library testing LibraryH3lp a few months ago. They found that in their older demographic, pressing enter to send a message wasn't obvious to everyone. We hope this will help.

We'd love to expand this change to the non-English translations as well. So, if you know how to say, "Press enter to send" in Czech, French, Chinese, Spanish (Europe), Spanish (Puerto Rico), or Russian, drop us a line.

Now, this does mean that there is suddenly more text in that area. If your widget is really narrow and it doesn't look tidy, you can change the font size using CSS. The easiest way to do this is in the Design Public Services wizard area of the admin interface. Find the saved skin you're using for the widget in question, and paste something like the below in the Wicked CSS Hack area:

#msg {
font-size: 12px;
}

As long as we're talking about CSS tweaks, here is boilerplate CSS for changing font style attributes overall:

#recv, #msg {
 font-family: tahoma, verdana;
 font-size: 12px;
}
#header h1 {
 font-size: 15 px;
font-family: tahoma, verdana;
}

3) Widget is about 1/3rd of its original download size, thanks in part to new libraries, such as the new sound library and Strophe, a BOSH library.

4) Widget has real-time presence in many browsers. This means that if a queue changes online/offline status while a patron is looking at its widget, the change will be immediate, rather than delayed by polling. (Note that polling is still required for the presence API -- we're only talking about presence on actual widgets here.)

Alas, despite heroic efforts, we could not make real-time widget presence work in IE6 or IE7. Well, we could make it work, but not without unintended consequences that outweighed the benefits.

5) All presence calls are now on port 80 (standard HTTP port). Previously, port 5280 was also in use, and this didn't work in a few circumstances, such as some locked-down public wireless networks.