August 17, 2010

How to add a virtual keyboard to Kayako SupportSuite / eSupport

If you are using Kayako SupportSuite as your ticket system and help desk platform, I recommend providing a virtual keyboard in order for your staff and administrators to enter their passwords securely. An example implementation can be seen here.

A virtual keyboard is a software application which allows a user to enter characters via an onscreen keyboard. Unlike typing a password using a hardware keyboard, a virtual keyboard cannot be logged using a keystroke logger.

The follow instructions outline the process of adding a virtual keyboard to the Kayako staff and admin login pages.

Note: These instructions have been tested on Kayako build 3.70.02

1. Download my Virtual Keyboard build from: http://www.md3v.com/dl/Virtual_Keyboard.zip.

2.  Upload the “keyboard.css”, “keyboard.js” and “keyboard.png” to the /support/staff and /support/admin folders of the Kayako Support Suite.

3. Make a backup of the login form:

cp /support/themes/admin_default/loginform.tpl /support/themes/admin_default/loginform.tpl~

4. Edit /support/themes/admin_default/loginform.tpl and after:

<{include file=”header.tpl”}>
<body onLoad=”focusUsername()”>

Add: <link rel=”stylesheet” type=”text/css” href=”keyboard.css”>

<script type=”text/javascript” src=”keyboard.js” charset=”UTF-8″>

Change: <input type=”password” name=”password” id=”password” value=”<{$password}>” size=”25″ />

To: <input type=”password” name=”password” id=”password” lang=”en-us” value=”<{$password}>” size=”25″ />

5. Save the file and exit nano.

6. Test your Kayako site to confirm that the virtual keyboard is working.

NOTE: The code included in this post may not display correctly in your browser. You may download a copy of the instructions here.