Multi-language Support for Webflow

Step 1: Add Custom Code in Webflow

Navigate to your Webflow site’s **Project Settings > Custom Code**, and paste the following script in the **Header** section.

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

Step 2: Initialize the Toolkit

Once the script is added, initialize LíngAwesome by adding the following script. Replace YOUR_API_KEY_HERE with your actual API key from LingAwesome.

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

Step 3: Use Language Tokens

To make content translatable, add the ta-kit attribute to your HTML elements. Here's an example of marking up elements for translation.

<h5 class="mb-4" ta-kit="hello-world">Hello World</h5>
<p ta-kit="welcome-message">Welcome to our site!</p>

These elements will automatically translate based on the selected language.

Step 4: Change Language Dynamically

Add language selection buttons to let users switch languages dynamically. Here’s an example:

<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="fr" lang="fr">French</button>
    <button class="btn btn-light btn-sm" ta-kit-select="es" lang="es">Spanish</button>
</div>

These buttons allow users to switch between languages on your Webflow site seamlessly.

Get Your API Key

Get started with LíngAwesome! Add multi-language translation (i18n) to your Webflow site today. No downloads or complex installs required!