libraryh3lp logo

LibraryH3lp is software used by libraries, educators, and non-profits for better customer service.

Thursday, July 18, 2013

The amazing, multilingual LibraryH3lp chat widget

Did you know that the LibraryH3lp chat widget is available in 12 different languages? All of these translations were graciously provided by librarians for librarians. Our widgets auto-detect the patron's browser settings and display the appropriate translation, if available.

But what if you have a web page written in a specific language or other need for a specific translation? LibraryH3lp makes it easy to override the chat widget's auto-detect and specify your desired language.

The short version

Every LibraryH3lp chat widget has its own URL, which accepts a lang argument:

https://libraryh3lp.com/chat/my-queue@chat.libraryh3lp.com?skin=20328&sounds=true&lang=fr-ca

Widget showing Canadian French translation and
simpletext, the default English language presence theme.


If you've deployed iframe widgets or DIY code, you'll see where the lang argument goes since your widget URLs are plainly visible. Or if you're using code snippets from the Services designer, we'll walk you through a small tweak needed to override the widget language later in this post.


Translating presence themes

Now, how about changing that English presence theme in the top left corner, too?  If you wanted a text-based theme (like simpletext, shown above) and nothing was available for your desired language, we will work with you to create one. Or you could opt for a language-neutral theme. And of course widgets can be dressed up with background images, colors, or other custom CSS to compliment your website and branding.

Take a look at the custom presence theme provided by the Austrian National Library!

Austrian National Library custom presence theme designed by Michaela Mayr.  Widget shown in German language.

Updated Services Designer

Specifying a language for your chat widget using the updated Services Designer is straight-forward. To provide that language override, you need to made one Advanced Code Edit in your Service code snippet.  So head over to the admin site and go to the Services tab to find/add your service.

First, you'll want to make sure that you are using the correct widget skin. In the edit page for your service, select the desired widget skin by clicking the chat widget thumbnail.

Next, you'll need to make that advanced code edit we mentioned earlier. See that code edit icon just to the left of the widget thumbnail? Click that to enter the advanced service level code editor.

Advanced code edit option

Once you're in the advanced service level code editor, look for your widget URL, and place the lang variable (for example, lang=de) at the end, after an &. Then save your changes.

Setting the lang variable (lang=de for German) at the end of the widget URL.

If the code snippet for your service is already deployed on your web page, your updates will automatically take effect! If you've created a new service, don't forget to install the code snippet for your service on your web page.







No comments: