Framer multilingual: how to add languages to your Framer site (2026)
Framer is one of the fastest ways to go from design to a live website. But when you need to reach visitors in multiple languages, you have two distinct options: Framer's built-in Localization feature, or adding automatic translation via a script tag. This guide covers both approaches — how they work, where each one fits, and how to get set up through a guided workflow.
Framer's built-in localization
Framer has a native Localization feature available in site settings. Once enabled, you add locale variants to your project — for example English, French, and German — and Framer creates per-locale versions of each page inside the designer. You then translate text layer by layer, either by typing directly or by importing translated content.
The primary advantage of Framer Localization is its tight integration with the platform. Translated pages are published to locale-prefixed URLs out of the box (/fr/, /de/) and Framer handles the routing automatically. Framer CMS collections can have locale-specific entries, giving you full editorial control per language.
There are, however, meaningful trade-offs to consider:
Requires a Pro plan or higher
Framer Localization is not available on the free plan. You need a paid Framer plan to enable it, which is an additional cost consideration for small projects or early-stage products.
Every page must be maintained per locale
Adding a new language means every page in your Framer project gains a locale variant that needs translated content. As your site grows — more pages, more components, more CMS items — the translation surface grows proportionally. A fifty-page site in five languages means two hundred and fifty locale variants to keep in sync.
CMS items must be duplicated per locale
Framer CMS content — blog posts, case studies, team members — requires a separate entry for each locale. Translated blog posts are distinct CMS items, not automatic translations of the primary-locale entry. For content-heavy sites this is a significant editorial commitment.
Automatic translation with a script tag
A DOM-based translation widget takes a fundamentally different approach. Instead of managing translations inside Framer, it translates the published site automatically — observing rendered text in the browser and replacing it with the target language in real time.
You add a single script tag to Framer via Site Settings → General → Custom Code → End of body. From that point, every page, CMS collection, and component is covered without any design changes or per-locale duplication.
No design duplication
Your Framer project stays exactly as it is. Adding a new language takes seconds in the translation dashboard — no extra designer work, no new CMS entries, no republish required.
Requires Custom Code access
Confirm that your current Framer plan and workspace allow site-wide Custom Code before choosing the script-tag path.
Use Framer routing for multilingual SEO
General Lingvit runtime translation does not inject hreflang or create indexable locale URLs at launch. Use Framer's publication features for locale URLs, translated metadata, canonicals, and reciprocal hreflang.
Client-side translation
Unlike Framer Localization, translations are applied in the browser rather than server-rendered per locale. This is the primary trade-off: the source HTML is the same for all visitors; language switching happens on load. For most marketing sites and portfolios this is not a meaningful drawback.
Step-by-step: add Lingvit to your Framer site
- 1
Create a Lingvit project
Sign up at app.lingvit.com, create a new project, and enter your Framer site's domain. Copy the script tag from the project settings.
- 2
Open Framer Custom Code settings
In Framer, go to Site Settings → General → Custom Code and find the End of body field.
- 3
Paste the script tag
Paste your Lingvit project script into the End of body field. It looks like:
<script src="https://cdn.lingvit.com/widget.bundle.js" data-project-id="YOUR_PROJECT_ID" defer ></script> - 4
Publish your Framer site
Click Publish in the Framer toolbar. The script is now live on your published site.
- 5
Select languages in the Lingvit dashboard
Back in the Lingvit dashboard, choose your target languages. The language switcher appears on your live Framer site immediately. Translations are generated when first requested and stored for reuse thereafter. Generation and delivery timing depend on the page, browser, network, and provider response.
Framer CMS and translation
Framer CMS content — blog posts, case studies, team members, product listings — is bound to page elements dynamically. When Framer renders a CMS collection page, the data becomes part of the DOM just like any other text on the page.
The automatic translation approach observes the rendered DOM rather than reading Framer's internal data model. This means CMS-bound text is captured and translated automatically, with no extra configuration. Every blog post, every collection item, every dynamically populated field is included.
With Framer Localization, by contrast, CMS items need duplicate entries for each locale. A blog post in English and French requires two CMS items — you write and maintain both. For teams publishing frequently, this per-locale duplication becomes a significant editorial overhead.
Which approach fits your project?
| Factor | Framer Localization | Automatic translation |
|---|---|---|
| Translation method | Manual (type or import per locale) | Automatic + editorial overrides |
| Setup time | Hours to days | Guided custom-code setup |
| Framer plan required | Pro or higher | Starter and above |
| CMS handling | Duplicate items per locale | Automatic via DOM observation |
| Rendering | Server-rendered per locale | Client-side on load |
| Adding a new language | Requires per-page translation work | One click in the dashboard |
Scroll horizontally to view every column.
Choose Framer Localization if you need fully server-rendered multilingual pages, require per-locale images or locale-specific CMS entries, and are already on a Framer Pro plan with the editorial resources to maintain each locale.
Choose automatic translation if you want to go live in multiple languages quickly, with no design duplication and no per-locale CMS overhead. It is especially well-suited to marketing sites, portfolios, and SaaS landing pages where time to market matters more than server-rendered locale routing.
Frequently asked questions
- Do I need a Framer Pro plan for automatic translation?
- No, Custom Code injection is available on Starter and higher plans. You do not need a Framer Pro plan to add a translation script via Custom Code.
- Does it translate Framer CMS collection pages?
- Yes, all rendered DOM content including CMS-bound text is observed and translated. Because the translation widget reads the page after Framer renders it, CMS collection items are captured automatically without any special configuration.
- Will it conflict with Framer Localization if I already have it enabled?
- They are independent systems and can coexist, though you would typically use one or the other. Running both simultaneously may produce redundant language-switcher UI and is not recommended for a production site.
- Does it handle SEO for translated pages?
- Not through general Lingvit runtime routing at launch. Use Framer's own locale URLs and metadata for indexable language pages; Lingvit can translate the browser-rendered experience.
Related guides
Translate your Framer site
Add Lingvit to an eligible Framer site through Custom Code. Plans start at $9/month.