Weglot

Webflow does not include built-in automatic translation. Its native Localization feature relies on manual translation triggers for each page and CMS item, and it connects only with a small set of vetted translation management systems. For teams trying to publish across many languages quickly, that can slow down the path from new content to an international launch.

Weglot adds multilingual translation to any Webflow site through a single JavaScript snippet. Once installed, it detects all visible content — including static pages, Webflow CMS items, metadata, and image alt text — and translates it into your target languages. Translated pages get their own URLs via subdomains or subdirectories, and Weglot injects hreflang tags server-side so search engines index each language version separately.

This integration is most useful for marketing teams expanding into new markets, ecommerce operators managing multilingual product catalogs, SaaS companies localizing their marketing sites, and agencies delivering multilingual Webflow projects for clients. Anyone who needs more than a few languages or wants translations to go live without manual per-page triggers will benefit from this setup.

How to integrate Weglot with Webflow

What is Weglot? Weglot is a website translation and localization platform that automatically detects, translates, and displays content in 110+ languages. It uses AI-powered machine translation with options for manual editing, glossary rules, and professional human translation. Translations are managed through a dashboard and visual editor without requiring changes to the original site architecture.

Teams use Weglot with Webflow when they need a multilingual site without rebuilding pages for each language. The JavaScript-based integration translates content on the fly and creates language-specific URLs that search engines can index. This is especially relevant for sites with large CMS collections, where manually triggering translations for each item would take significant time.

The Weglot-Webflow integration supports 3 approaches:

• The Weglot JavaScript snippet handles automatic translation, language switching, and multilingual SEO through custom code in the site head — no developer work required beyond a copy-paste step.
• Language switcher customization with Code Embed elements lets you place the language switcher in specific locations like your navbar or footer.
• The Webflow and Weglot APIs give you full control over translation workflows and CMS content management, but require server-side development.

Most implementations start with the JavaScript snippet and add switcher customization or API workflows as the project grows.

Add the Weglot script to your Webflow site

The primary integration method requires pasting a JavaScript snippet into your Webflow site settings. This single script handles automatic content detection, AI translation, language switcher display, and multilingual SEO setup including hreflang tags and language-specific URLs.

A paid Webflow site plan is required because custom code injection is not available on the free Starter plan. On the Weglot side, a free plan covers sites under 2,000 translated words in one language, with paid plans starting for larger sites or additional languages. The Weglot Webflow setup guide walks through every step.

[image placeholder]

To set up the integration:

1. Create a Weglot account at dashboard.weglot.com and start a new project, selecting Webflow as the website technology.
2. Set your original language and target translation languages.
3. Enter your custom domain. Do not enter a .webflow.io staging domain — if you do not have a custom domain yet, select Connect my live website and use the JavaScript-only integration option.
4. For subdomain integration, create a CNAME DNS record for each language code (e.g., fr) pointing to the value Weglot provides (format: xxx.translate-cf.weglot.io). For subdirectory integration, follow Weglot's official Webflow-specific setup instructions in the Weglot Webflow setup guide, then click Check DNS and wait for the green checkmark (up to 10 minutes).
5. In the Webflow dashboard, click the three dots (⋯) on your site and select Settings. Open the Custom Code tab, then paste the following snippet into the Head Code field:

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
 Weglot.initialize({
   api_key: 'YOUR_API_KEY'
 });
</script>



Replace YOUR_API_KEY with the API key from your Weglot dashboard.

6. Click Save Changes, then click Publish. The language switcher appears at the bottom right of your live site.

After publishing, Weglot detects and translates all visible content as visitors load pages. The integration supports three URL structures:

• JavaScript only — no URL changes, no SEO benefit. Use for testing or sites without a custom domain.
• Subdomain — translated pages at fr.yoursite.com. Creates indexable URLs per language.
• Subdirectory — translated pages at yoursite.com/fr/. This setup is supported, but the Webflow-specific DNS and proxy configuration should be followed from Weglot's official setup guide.

All ongoing translation management happens in the Weglot dashboard. You can edit any translation manually, set glossary rules for brand names or technical terms, exclude specific URLs or content blocks, and order professional human translations — all without returning to Webflow. The visual editor shows translations overlaid on a live preview of your site so you can catch text expansion issues before they go live.

Customize the language switcher in Webflow

The default language switcher appears at the bottom right of your site. For most production sites, you will want to move it into your navbar, footer, or another specific location. Weglot offers several methods for repositioning the switcher, ranging from drag-and-drop to code-based placement.

Reposition with the Weglot switcher editor

The Weglot switcher editor is a no-code drag-and-drop tool inside the Weglot dashboard. It lets you move the switcher to a new position, configure its appearance (flags, language names, dropdown vs. list layout), and preview changes on both desktop and mobile.

To reposition the switcher:

1. Open the Weglot dashboard and go to the Switcher Editor.
2. Drag the switcher to your preferred location on the page preview.
3. Adjust display settings — language name format, flag style, and layout type.
4. Save changes. The updated switcher appears on your live site without any Webflow changes.

This method works for most sites but does not allow placement inside a specific Webflow element like a navbar component.

Place the switcher with a Code Embed element

For precise placement inside your Webflow layout, use an HTML Embed element containing a target div. Weglot detects this div and renders the switcher at that location instead of the default position.

To place the switcher in a specific location:

1. Open your site in Webflow and select the element where you want the switcher to appear (e.g., inside your navbar).
2. Add a Code Embed element from the Add panel at that location.
3. Paste the following code into the embed:

<div id="weglot_here"></div>



4. Save and publish your site.

The switcher renders inside the weglot_here div on the live site. Note that script tags inside Code Embed elements only execute on the published site, not in the Webflow canvas preview.

Add language links to your navigation menu

You can integrate language switching directly into your Webflow navigation by creating menu links that trigger Weglot language changes. This approach uses Weglot's link hook format instead of a visible switcher widget.

To set up navigation-based language switching:

1. Add a menu item for each language in your Webflow navbar (e.g., "English" and "French").
2. Set the link for each item using the format #Weglot- followed by the language code — for example, #Weglot-en for English and #Weglot-fr for French. The capital "W" in #Weglot- is required.
3. Publish your site.

Clicking a language link switches the page content to that language without a page reload.

Use cloneable switcher components

Weglot has partnered with Finsweet and Digidop to create pre-built, cloneable Webflow switcher components. The Weglot Components by Digidop collection includes five ready-made designs. The Webflow UI Kit by Finsweet 2.0 includes 20 switcher designs. Clone either project into your Webflow workspace and copy the switcher component into your site.

These components provide styled language switchers that work with the Weglot script without requiring custom CSS or Code Embed configuration.

Build with the Webflow and Weglot APIs

For teams that need programmatic control over translation workflows, such as translating content strings in a headless Webflow setup or syncing CMS items with external systems Both Weglot and Webflow provide REST APIs. This approach requires server-side development and is suited for custom applications rather than standard multilingual sites.

The available APIs cover different parts of the workflow:

• The Weglot Translation API handles on-demand text translation. It accepts an array of word objects containing the string and a WordType integer, and returns translated text for any supported language pair.
• Webflow Data API handles sites, CMS collections, items, and site publishing.
• Webflow webhooks trigger real-time events when CMS content changes, which can feed into translation workflows.

Weglot does not support webhooks or callback mechanisms. Its public API has four endpoints and does not include endpoints for glossary management, retrieving stored translations, or editing translations programmatically. Those functions are only available through the Weglot dashboard.

Translate CMS content strings via the Weglot API

The Weglot Translation API accepts an array of text strings with type metadata and returns translations. This is useful for headless Webflow implementations where content needs to be translated outside the standard JavaScript overlay.

To translate content strings:

1. Send a POST request to https://api.weglot.com/translate?api_key=YOUR_API_KEY with a JSON body containing the source language, target language, and an array of word objects:

{
 "l_from": "en",
 "l_to": "fr",
 "request_url": "https://www.yoursite.com/",
 "words": [
   {"w": "Welcome to our site", "t": 1},
   {"w": "Shop all products", "t": 1}
 ]
}



2. The t value specifies the content type: 1 for general text, 4 for meta descriptions, 7 for image alt text, and 9 for page titles. Use the correct type so Weglot applies the right translation context.
3. The response returns the translated strings in the to_words array, matched by index to the original from_words array.

Authentication uses the API key as a URL query parameter, not a Bearer token header.

Trigger translations from Webflow CMS changes

Because Weglot does not support webhooks, event-driven translation requires using Webflow as the event source. Webflow webhooks fire when CMS items are created or updated, and custom middleware can receive these payloads and call the Weglot Translation API.

To set up this workflow:

1. Register a Webflow webhook for CMS item events (e.g., collection_item_created or collection_item_changed).
2. Build a middleware service that receives the webhook payload, extracts the text fields from the CMS item, and sends them to the Weglot Translation API.
3. Optionally, write the translated content back to Webflow CMS using the Collection Items API with locale-specific cmsLocaleId values from the Webflow Sites API.

This approach gives you full control over when and how translations happen, but requires maintaining a server-side service. For most standard Webflow sites, the JavaScript snippet handles content detection and translation automatically without this level of custom development.

What can you build with the Weglot Webflow integration?

Integrating Weglot with Webflow lets you deliver a fully multilingual website without duplicating pages, managing parallel CMS collections, or manually tagging each piece of content for translation.

• Multilingual marketing sites with automatic SEO: Launch translated versions of your entire marketing site with language-specific URLs, server-side hreflang tags, and translated meta descriptions. Respond.io used this approach to reach 90+ countries across 15 languages on their Webflow site, growing search impressions significantly within a year.
• Translated ecommerce product catalogs: Translate product listings, shopping cart content, and checkout flows across multiple languages as new CMS items are published. The Bradery translates 500+ daily product launches automatically, reducing translation management to 10 minutes twice a week.
• Agency-delivered multilingual client sites: Deploy a repeatable multilingual setup for client projects using the same script-based integration and Weglot dashboard. Agencies like Influence Society deliver hotel client sites in 40+ languages without rebuilding the site architecture for each language.
• Localized SaaS product pages with glossary control: Translate your marketing site and documentation while keeping brand names, product terms, and technical language consistent across all languages using Weglot's glossary rules. TextCortex manages 9 languages this way, adding new markets with minimal friction.

If you need more control over CMS-level translation workflows or headless content delivery, the API integration path covers those cases with full flexibility.