Swalekh Installation Guide for Vanilla JavaScript

Overview

Swalekh provides a seamless input experience by enabling users to type in various languages using phonetic transliteration. This guide will help you set up Swalekh in your Vanilla JavaScript project.

Installation

Step 1: Add Script to Head

To include the Swalekh library in your project, add the following script tag to the <head> section of your HTML file:

<head>
  <script src="https://cdn.jsdelivr.net/npm/swalekh-sdk@2.6.0/swalekh.js"></script>
</head>

Step 2: Declare the LoadSwalekh Function

In your JavaScript code, declare the loadSwalekh function. This function initializes Swalekh with your validation key and specific settings.

const validationKey = "YOUR-VALIDATION-KEY"; // Replace with your actual validation key
 
const loadSwalekh = async () => {
  await window.initSwalekh({
    validationKey,
    creds: {
      querySel: "#swalekh-textarea3", // Selector for your textarea
      lang: "hi", // Language for transliteration (e.g., Hindi)
      mode: "phonetic", // Input mode (e.g., phonetic)
    },
  });
};

Step 3: Call the Load Function

After declaring the function, call it when the page loads. You can use the window.onload event to ensure that Swalekh initializes once the window is fully loaded:

window.onload = () => {
  loadSwalekh();
};

Step 4: How to Unload Swalekh

If you need to unload Swalekh (e.g., when navigating away from a page or cleaning up resources), you can call the unloadSwalekh function as follows:

await window.unloadSwalekh({
  querySel: "#swalekh-textarea3", // The same querySel used in loadSwalekh
});

Step 5: How to Trigger Language Toggle

To programmatically change the language, you can use the trigger_lang_change function. The language parameter should match one of the languages supported by Swalekh:

await window.trigger_lang_change(language); // Replace 'language' with the desired language code

Step 6: How to Trigger Mode Toggle

To switch between input modes (phonetic or keyboard), use the trigger_mode_change function. You can specify the mode as follows:

await window.trigger_mode_change(mode); // mode can be "phonetic" or "keyboard"

Example HTML Structure

Here's an example of how your HTML structure might look with Swalekh:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swalekh Integration</title>
    <script src="https://your-cdn-url/swalekh.js"></script> <!-- Include Swalekh script -->
</head>
<body>
    <h1>Swalekh Integration Example</h1>
    <div class="toolbar">
        <label>
            Select Language
            <select id="langSelect">
                <option value="hi">Hindi</option>
                <option value="en">English</option>
                <option value="as">Assamese</option>
                <option value="bn">Bengali</option>
                <option value="gu">Gujarati</option>
                <option value="kn">Kannada</option>
                <option value="ml">Malayalam</option>
                <option value="mr">Marathi</option>
                <option value="or">Odia</option>
                <option value="pa">Punjabi</option>
                <option value="ta">Tamil</option>
                <option value="te">Telugu</option>
                <option value="ur">Urdu</option>
            </select>
        </label>
        <label>
            Keyboard
            <input type="checkbox" id="keyboardCheckbox" />
        </label>
    <textarea id="swalekh-textarea3" rows="5" placeholder="Type here..."></textarea>
 
    <script>
        const validationKey = "YOUR-VALIDATION-KEY"; // Replace with your actual validation key
 
        const loadSwalekh = async () => {
            await window.initSwalekh({
                validationKey,
                creds:{
                    querySel: '#swalekh-textarea3',
                    lang: 'hi',
                    mode: 'phonetic',
                    langToggle: true,
                    modeToggle: true,
                },
                optional: {
                    theme: "reverie-red"
                }
            });
        };
 
        window.addEventListener('load', function () {
            loadSwalekh();
            window.addEventListener('load', function () {
                    document.querySelector('#langSelect').addEventListener('change', function (e) {
                    lang = e.target.value;
                    loadSwalekh();
                });
            window.addEventListener('load', function () {
            document.querySelector('#keyboardCheckbox').addEventListener('change', function (e) {
                keyboardEnabled = e.target.checked;
                window.trigger_mode_change(keyboardEnabled ? "keyboard" : "phonetic");
            });
        });
        });
 
        });
    </script>
</body>
</html>

Conclusion

By following this guide, you can successfully integrate Swalekh into your Vanilla JavaScript application, allowing users to input text in various languages using phonetic transliteration. For further assistance, please refer to the Swalekh API Documentation or contact our support team.

Introduction React JS