Build multilingual Webflow websites fast with Weglot’s translation tools.
Building multilingual corporate websites requires connecting Webflow's visual development platform with Weglot's translation service. This integration enables automatic translation of content while maintaining Webflow's design flexibility and hosting infrastructure.
The technical implementation involves JavaScript SDK integration through Webflow's custom code section, DNS configuration for subdomain or subdirectory URL structures, and API-based translation workflows via the Weglot Translation API that scale for enterprise requirements.
Prerequisites
Set up accounts and credentials for both platforms before beginning implementation.
At a high level, you'll: • Set up your Weglot account with project configuration • Generate API tokens in Webflow site settings • Configure a custom domain (temporary .webflow.io domains are incompatible)
Critical constraint: Webflow's v1 API sunsets March 31, 2025. Use API v2.0.0 for new implementations.
Architecture overview
The integration operates through client-side JavaScript that intercepts page content and communicates with Weglot's Translation API to inject translated text dynamically.
flowchart TD
A[Webflow Site Loads] --> B[Weglot JS Library Initializes]
B --> C[Content Detection & Classification]
C --> D[API Request to Weglot]
D --> E[Translation Response]
E --> F[DOM Manipulation]
F --> G[Translated Content Rendered]
H[User Switches Language] --> I[Weglot.switchTo Function]
I --> D
J[DNS Configuration] --> K[Language URL Routing]
K --> L[SEO-Friendly URLs]
M[Language Detection] --> N[Browser Language API]
N --> O[Automatic Redirection]Data flow: Webflow serves the base HTML structure while Weglot's JavaScript SDK handles content translation through DOM manipulation after page load. The system maintains original page structure while replacing text content with translations from Weglot's API.
Language routing works through URL patterns (subdirectories or subdomains) that require DNS configuration to function properly. According to Weglot's URL structure documentation, subdomain structures (e.g., fr.mywebsite.com) require CNAME records for each target language, while subdirectory structures (e.g., mywebsite.com/fr/) require appropriate DNS configuration via the Weglot dashboard verification process.
Implementation concepts
Connect the platforms by adding Weglot's JavaScript library to your Webflow project's custom code settings (Head Code section) and configuring translation settings in the Weglot dashboard.
At a high level, you'll: • Add the Weglot initialization snippet to your Webflow project's head section • Configure DNS records for language routing • Add language pairs in the Weglot dashboard
JavaScript integration: Place the Weglot script in Webflow's Custom Code settings within the head section. The implementation requires your API key and initialization configuration.
Configuration patterns
Configure URL structures and authentication using standard parameter patterns from both platforms.
At a high level, you'll: • Choose between subdirectories or subdomains URL structures • Store API credentials securely using environment variables • Configure translation exclusions for non-translatable content
URL structure decision: Subdirectories (example.com/fr/) are recommended for SEO benefits, while subdomains (fr.example.com) require individual CNAME records per language.
Security patterns: Weglot uses API key authentication passed as query parameters. According to official security documentation, developers should implement server-side key storage and environment variables to prevent exposure in client-side code, as URL parameters can be logged in server logs, browser history, and referrer headers.
Verification approach
Test language switching functionality and validate translated content appears correctly across all configured languages.
At a high level, you'll: • Verify the language switcher appears on published pages • Test URL routing for each target language • Validate translated metadata and hreflang implementation
Layout verification: Check that translated text fits properly within design containers, especially for languages with longer word lengths than the source language. According to the Localization Testing Guide, verify that site layout maintains integrity across all translated languages and test for text overflow issues where translated text may be longer than source language text.
Dynamic content testing: JavaScript-generated content requires manual configuration through CSS selectors in the Weglot dashboard.
Advanced considerations
Scale the integration with performance optimizations and custom translation management for enterprise requirements.
At a high level, you'll: • Implement custom language switchers using Weglot's JavaScript API • Configure language pairs and translation settings in the Weglot Dashboard • Set up DNS configuration for your chosen URL structure (subdirectories or subdomains)
Performance optimization: Translations are cached client-side to reduce API calls. Consider implementing lazy loading for language switcher components on content-heavy pages.
Enterprise scaling: Use Webflow's API access to programmatically manage content updates and trigger translation workflows through Weglot's integration.
Common integration challenges include DNS configuration issues and dynamic content translation limitations. Reference the official troubleshooting guides for systematic resolution approaches.
