How we integrated KeymanWeb in Wikipedia

How we integrated the Tavultesoft KeymanWeb web keyboard into Wikipedia: it was just a few small steps and a couple of hours of graphic design.

We recently published a KeymanWeb Wikipedia Plugin to allow you to use KeymanWeb anywhere in Wikipedia — editing pages, searching for information, or participating in discussions.  In this post, I wanted to talk about the process of integration from beginning to end.

The whole process took us about 4 hours.

1. We created a free subscription for KeymanWeb at http://www.tavultesoft.com/account/home/kmw/  We followed the steps in the subscription process, added every keyboard for every language, and added the domain "en.wikipedia.org" as the primary domain for the subscription.  (We later extended the subscription to every Wikipedia domain).
2. Next, we created a new plugin Javascript file at http://en.wikipedia.org/wiki/User:Keymanweb/keymanweb.js which linked to our KeymanWeb subscription and imported the KeymanWeb Javascript components as the page loaded, using the Wikipedia Monobook function addOnloadHook:
   

   addOnloadHook( function() {
    document.writeln("<"+"scr"+"ipt type='text/javascript' "+
    "src='http://r.keymanweb.com/code/?domain="+
    location.hostname+"&id=243&page="+
    encodeURIComponent(location.pathname)+"'>"+
    <"+"/"+"scr"+"ipt>");
    
    document.getElementById('bodyContent').innerHTML = 
    "<div id='KeymanWebControl'></div>" + 
    document.getElementById('bodyContent').innerHTML;
   } );

3. Also in the same Javascript file, we inserted an element at the top of the bodyContent as a container for the KeymanWeb toolbar:
   

   importStylesheetURI(
    'http://en.wikipedia.org/w/index.php?title='+
    'User:Keymanweb/keymanweb.css&action=raw&'+
    'ctype=text/css' );
   
   

4. At this point, we had KeymanWeb working within Wikipedia, and could select a keyboard and type with it in any edit box in Wikipedia.
5. However, we decided that the normal KeymanWeb toolbar was too intrusive for Wikipedia, and replaced it with a new, smaller toolbar.  This took the most time, including drawing, scaling and modifying the CSS rules for displaying the toolbar.  We recorded our CSS changes in http://en.wikipedia.org/wiki/User:Keymanweb/keymanweb.css.  Firebug in Firefox was an invaluable tool for tweaking the CSS to get it just right.
6. Finally, we took some time to write up the instructions for integrating KeymanWeb into your own user profile in Wikipedia.

As you can see, the actual integration process was dead easy.  Most of the time we spent was taken on polishing the look and feel of KeymanWeb for a better fit into Wikipedia.  We were surprised ourselves by how straightforward it was to get the basic integration right.

Try it yourself at http://en.wikipedia.org/wiki/User:Keymanweb!