Keyboard Support

Contact and Search

Keyman.com Homepage

Header bottom

Keyman.com

Other versions
Version 17.0Version 16.0 (current version)Version 15.0Version 14.0Version 13.0Version 12.0Version 11.0Version 10.0Version 2.0Version 1.0 (home page)

On this page

Getting Started With KeymanWeb

Prerequisite

  • First, if you have not yet obtained a copy of KeymanWeb, please visit the KeymanWeb Developer Home. A link to the "https minified" version of the code will be used here.

Demo

To setup a basic first page with KeymanWeb, only two lines of code are necessary, but a few more lines will be shown here. Toward that end, an example page:

The source code for the page may be seen below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>KeymanWeb - A First Example</title>

  <script src='https://s.keyman.com/kmw/engine/16.0.147/keymanweb.js'></script>
  <script src='https://s.keyman.com/kmw/engine/16.0.147/kmwuitoggle.js'></script>
  <script>
    (function(kmw) {
      kmw.init({attachType:'auto'}).then(function() {
        kmw.addKeyboards('@en'); // Loads default English keyboard from Keyman Cloud (CDN)
        kmw.addKeyboards('@th'); // Loads default Thai keyboard from Keyman Cloud (CDN)
      });
    })(keyman);
  </script>
</head>
<body>
  <p>Click me and type: <input placeholder="Hello World"/></p>
</body>
</html>

The Breakdown

  • The <script> inclusion <script src='https://s.keyman.com/kmw/engine/16.0.147/keymanweb.js'></script> loads the Keyman Engine for Web script for the page.

  • (function(kmw) { kmw.init(); }); serves to initialize the web engine with default settings. By adding the object {attachType:'auto'} as a parameter to our kmw.init() call, the KeymanWeb engine will then link into any detected input elements automatically, regardless of browser or device, as part of its initialization.

  • The other <script> inclusion, <script src='https://s.keyman.com/kmw/engine/16.0.147/kmwuitoggle.js'></script>, creates the language menu seen on non-mobile devices and the on-screen keyboard toggle button. For other options, see our User Interface Design page.

  • The calls to kmw.addKeyboards() in the source above link in the two example Keyman keyboards used in this demo from our CDN server. For more info on how to include keyboards in your KeymanWeb installation, check the Adding Keyboards page.

API References

On initialization: keyman.init().

On including keyboards: keyman.addKeyboards().