Examples
Vanilla JS

Swalekh Integration Documentation for Vanilla JavaScript

Overview

Swalekh is a powerful tool for transliteration and input typing in various languages, designed to enhance user experience by allowing seamless input and conversion of text into different scripts. This documentation will guide you through the installation process using Vanilla JavaScript.

Installation

Prerequisites

Before you begin, ensure you have the following:

  • A valid Validation Key. This key is essential for initializing Swalekh.
  • Access to the Swalekh script in your HTML.

Step 1: Include Swalekh Script

Add the Swalekh script to your HTML file. This should be included before your custom script that initializes Swalekh.

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

Step 2: Initialize Swalekh

In your JavaScript, you will need to initialize Swalekh using your validation key. Below is a code snippet demonstrating how to do this:

<script>
    const validationKey = "YOUR-VALIDATION-KEY"; // Replace with your actual validation key
 
    const loadSwalekh = async () => {
        // Initialize Swalekh with the validation key and optional configurations
        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)
                langToggle: true, // Enable language toggle
                modeToggle: true, // Enable mode toggle
            },
            optional: {
                theme: "reverie-red" // Specify the theme you want to use
            }
        });
    };
 
    // Load Swalekh on window load
    window.addEventListener('load', function () {
        loadSwalekh();
    });
</script>

Step 3: Create HTML Textarea

Ensure you have a textarea element in your HTML where the Swalekh input will be applied:

<textarea id="swalekh-textarea3" rows="5" placeholder="Type here..."></textarea>

Configuration Options

  • validationKey: A string representing your validation key.
  • optional.theme: Specify the theme for the Swalekh interface (e.g., "reverie-red").
  • querySel: CSS selector for the textarea or input element where you want to apply Swalekh.
  • lang: Language code for transliteration (e.g., 'hi' for Hindi).
  • mode: Mode of input; options include:
    • 'phonetic': Allows phonetic input.
    • Other modes may be available depending on your implementation.
  • langToggle: Boolean to enable or disable language toggle.
  • modeToggle: Boolean to enable or disable mode toggle.

Example Usage

Here is a complete example of a simple HTML document integrating Swalekh with language and mode change:

<!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>

Troubleshooting

  • Validation Key Issues: Ensure you are using a valid and active validation key.
  • Script Not Loading: Check your CDN URL and ensure it is correct and accessible.
  • Textarea Not Found: Verify that the querySel matches the textarea element in your HTML.

Conclusion

By following the steps outlined in this documentation, you can successfully integrate Swalekh into your web 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.

ThemesReact JS