Way to Go!

Your API key is on its way! Check your email for the next steps and start your multilingual journey now.

Instructions

1. Include the LíngAwesome Script

Add the script tag to include the LíngAwesome script in your HTML file. Place this before the closing </body> tag.

<script src="https://www.lingawesome.com/cdn/script/lingAwesome-1-1.min.js"></script>

2. Initialize the LíngAwesome Toolkit

Initialize the toolkit with the API key we emailed to you and your desired language. Ensure you replace "YOUR_API_KEY_HERE" with the API key from the email.

window.lingAwesome.init({
    apiKey: "YOUR_API_KEY_HERE",
    language: 'en',
    autoTranslate: true, // Automatically translate the entire page on load
});

3. Mark Up Your Code with Tokens

Mark up your HTML elements with LíngAwesome language tokens to make them translatable. Explore the language kit of over 600 tokens.

<h5 class="m-b-4" ta-kit="hello-world">Hello World</h5>
<h5 class="m-b-4" ta-kit="welcome">Welcome</h5>
<h5 class="m-b-4" ta-kit="welcome-back">Welcome Back</h5>

4. Full Page Example

Provide a complete example with all the above steps combined.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LingAwesome Example</title>
</head>
<body>
    <h5 class="m-b-4" ta-kit="hello-world">Hello World</h5>
    <h5 class="m-b-4" ta-kit="welcome">Welcome</h5>
    <h5 class="m-b-4" ta-kit="welcome-back">Welcome Back</h5>

    <p class="text-muted"><small>(<span ta-kit-language></span>)</small></p>

    <div class="mb-2">
        <button class="btn btn-light btn-sm" ta-kit-select="en" lang="en">English</button>
        <button class="btn btn-light btn-sm" ta-kit-select="pt" lang="pt">Portuguese</button>
        <button class="btn btn-light btn-sm" ta-kit-select="fr" lang="fr">French</button>
        <button class="btn btn-light btn-sm" ta-kit-select="es" lang="es">Spanish</button>
        <!-- Add more buttons as needed -->
    </div>

    <script src="https://www.lingawesome.com/cdn/script/lingAwesome-1-1.min.js"></script>
    <script>
    window.lingAwesome.init({
        apiKey: "YOUR_API_KEY_HERE",
        language: 'en',
        autoTranslate: true, // Automatically translate the entire page on load
    });
    </script>
</body>
</html>

5. Additional Features

Refresh the Whole Page

window.lingAwesome.refreshDocument();

Refresh a Specific Element

const element = document.getElementById("myElement");
window.lingAwesome.refreshDocument(element);

Change Language on the Page

window.lingAwesome.setLanguage('fr'); // Change to French

Dynamic Language Display

<p class="text-muted"><small>(<span ta-kit-language></span>)</small></p>

LíngAwesome: Simplify Multilingual Development

Dive into the world of multilingual web development with LíngAwesome. Learn how to easily add language tokens to your projects and make them accessible to everyone, everywhere. Start your journey now and see how LíngAwesome can transform your sites and apps.

View Examples View Documentation

Get Started

LíngAwesome Translation Kit

Zero Bloat

Developer Control

Fast to Ship