Guide to using lipik.in plugin system
We have provided basic building blocks using which you can enable predictive multilingual input on your website. Using our API, you can modify the default behaviour of lipik.in components like keyboard and prediction panel to suit the style and needs of your website. E.g. you can customize the font, location and layout of the keyboard and the prediction panel using simple configuration of CSS parameters. You can also control the behaviour of these elements based on user actions, e.g. you may choose to display the keyboard and the panel only when a user actually wants to write in a particular text field.
Using lipik.in components does require you to configure you HTML pages, but it is quite straightforward, and you do not need to host anything extra on your website. All lipik.in components can be included directly from our website, just by following these simple steps:
  1. You will need to include an HTML Doctype declaration (DTD) at the top of your page. This is needed mainly for the benefit of your users running Internet Explorer. Internet Explorer does not follow the HTML rendering standard without a DTD, and does not display lipik.in components properly.
    If you do not know what a Doctype declaration is, just make sure you have included one of the following lines at the top of your page, as the very first line, with no blanks before:
    • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    •  or
    • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    •  or
    • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  2. Make sure that your page specifies the character set as UTF-8, in order to be able to display all languages. If you have access to your server, you should configure it to set the Content-Type HTTP header, or you can include the following line at the top of the head section of your HTML page:
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  3. Include lipik.in's plugin scripts on your webpage. This can be done easily just by copying the following code inside the head section of your HTML:
    • <script type="text/javascript" src="http://lipik.in/include/direct-scripts/lipik-plugin-load-start.js"></script>
  4. You can optionally include the stylesheet that defines the default look and feel of lipik.in components; or you might prefer to copy this file and make changes to various properties inside it to create your own look for the keyboard etc. Note that it is not necessary to include this file at all - lipik.in components will still render without it, but will not have a pleasing color-scheme.
    To use this file, you need to add the following line to the head section of your HTML page:
    • <style type="text/css">
      • @import "http://lipik.in/include/release/auxiliary/lipik-foundation.css";
    • </style>
  5. Add " lipik-predictive" to the class attribute for the text input fields where the user would enter multilingual text. Note that even this step is optional - without this, you would only get the lipik.in virtual keyboard but not the context-sensitive prediction.
  6. Call the InitializeLipik function in a script tag. This initializes the lipik.in system, and also lets you specify which text-fields on your page should be enabled for multilingual input, which language you want the input to be in etc.
  7. Please see below for a table detailing the parameters that can be passed to this function. There is a working HTML file plugin-example.html that demonstrates how to use the lipik.in plugin system. You can copy this file locally and modify it to suit your usage, if you want.
Good luck! We hope this information will let you use lipik.in on your website.. Feel free to contact us on techie@lipik.in if you need more assistance.
Last-but-definitely-not-the-least-and-all-that: Note that for now there is no restriction on how or where you use lipik.in plugin system. We only require that you do not use the service in an abusive fashion (e.g automated robots etc). We reserve that right to prohibit access from all sources that try to abuse the service.
Parameters accepted by the InitializeLipik function:
Name Type Default Description
inputFieldsQuery CSS3 style query string none, required A query string specifying the fields to be connected to the multilingual keyboard - e.g. ".multilingual" or "#my-special-input-field" (a quick reference is available). This is a required parameter.
pageLang string document.body.lang || document.documentElement.lang || "en" ISO language code for the page. If not given, the language specified as part of the 'html' declaration is used. See below for suported values.
keyboardAlign DOM element, or a valid element id body HTML element that the keyboard aligns with - the top-left of the keyboard aligns with the bottom-left of this element. You can give this element a specific bottom-margin through CSS, if you don't want the alignment to be flush.
cpanelHolder DOM element, or a valid element id null If specified, the candidates panel is added inside of this element, and expands to take up all of its width. If not specified, candidates panel attaches to the keyboard.
focusField DOM element, or a valid element id null The text field automatically activates when the plugin is loaded and keyboard is displayed. If not set, keyboard only shows when one of the connected fields is first activated.
hardwareKbLayout string default layout for pageLang The layout of the physical keyboard connected to the user's computer. If not specified, it will be set to default for pageLang, which is US-international in most cases. User can change it through the virtual keyboard. See below for suported values.
kbMode integer keyboard display mode Controls how the virtual keyboard behaves. If set to 0 (default) the keyboard appears normally when first required, and stays on screen until explicitly hidden. If set to a value > 0, the keyboard hides (shows) itself when a connected input field loses (gains) focus. If set to a value < 0, the transliteration mode is enabled, and the keyboard is not displayed at all.

Example (assumes that the page contains elements with the id search-terms-input, kbd-align and candidates-panel-container):

List of language codes supported by lipik.in:
Code Language Name
List of keyboard layout codes supported by lipik.in:
Code Layout Name