Add i18n multilingual functionality to your Webflow site using LíngAwesome with ease!
Expand your global audience with Webflow and LíngAwesome. LíngAwesome provides a comprehensive set of ready-to-use language tokens that make adding multilingual support a breeze. Whether your Webflow site needs translations for e-commerce, content, forms, and more, LíngAwesome allows you to scale your reach effortlessly.
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>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 webflow page on load
});To make content translatable, add the ta-kit attribute to your Webflow 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.
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 started with LíngAwesome! Add multi-language translation (i18n) to your Webflow site today. No downloads or complex installs required!