Create Multi-Language Forms with LíngAwesome

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/d1de6ceb9a.js"></script>
<script src="https://lingawesome.com/lingawesome-latest-dev.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
<div class="p-4">
<h1 class="text-primary">Create Multi-Language Forms with LíngAwesome</h1>
<p class="mb-4">Build engaging sign-up, login, and account forms in multiple languages effortlessly with <a href="https://lingawesome.com/getstarted" target="_blank">LíngAwesome.</a> Simplify the translation process for a truly global user experience.</p>

        <div class="mb-2">
    <button class="btn btn-light btn-sm">
        <img title="English" alt="Language code en for English" src="https://flagsapi.com/GB/shiny/24.png" width="18px" style="margin-right: 2px; vertical-align: text-bottom;">
        <span ta-kit-select="en" lang="en" ta-kit="language-united-kingdom">English</span>
    </button>
    <button class="btn btn-light btn-sm">
        <img title="German" alt="Language code de for German" src="https://flagsapi.com/DE/shiny/24.png" width="18px" style="margin-right: 2px; vertical-align: text-bottom;">
        <span ta-kit-select="de" lang="de" ta-kit="language-germany">German</span>
    </button>
    <button class="btn btn-light btn-sm">
        <img title="Spanish" alt="Language code es for Spanish" src="https://flagsapi.com/ES/shiny/24.png" width="18px" style="margin-right: 2px; vertical-align: text-bottom;">
        <span ta-kit-select="es" lang="es" ta-kit="language-spain">Spanish</span>
    </button>
    <button class="btn btn-light btn-sm">
        <img title="French" alt="Language code fr for French" src="https://flagsapi.com/FR/shiny/24.png" width="18px" style="margin-right: 2px; vertical-align: text-bottom;">
        <span ta-kit-select="fr"...

JavaScript

// init the script on your page: this will detect the viewiers lanaguage automatically
// the script will also automatically deteck many inputs, labels and buttons, but for better customization you can add our token codes!

window.lingAwesome.init({
    apiKey: "NtNH85LVBLXNAhiPQTj5mMzwL7AkE431",
    language: 'en',
    observe: false,
    autoTranslate: true, // Automatically translate the entire page on load
    onLangChange: function(ev) {
        console.log(ev);
    }
});