Page Translator for Webflow
Translate your Webflow site into your Localization locales, or into separate language pages with your design and interactions kept. Paid once per site.
1. Install the app
- Install Page Translator from the Webflow Marketplace.
- Webflow asks which sites the app can access. Pick your site and click Authorize App. Clicking Cancel installs nothing.
- Open your site in the Designer, open the Apps panel and launch Page Translator.
Separate pages need a paid site plan (Basic or above), because each language adds pages to your site. Writing into locales needs the Webflow Localization add-on with at least one secondary locale.
2. Locales or separate pages
Page Translator works in one of two ways, depending on your site.
Site without Webflow Localization
The app copies each page you select into a folder per language, like /fr/about, and translates it. Each language page is a normal Webflow page that you can edit on its own. Sections 3 to 9 describe this mode.
Site with Webflow Localization
When your site has at least one secondary locale, the app writes the translations into your locales instead. It reads the text of the selected pages in your primary locale, translates it, and writes it into the secondary locale you pick, with the page title, SEO and Open Graph descriptions. The components these pages use, like your navbar and footer, are translated once for the whole site, as Localization does.
The app adds nothing else in this mode, no page, no folder and no script. Webflow serves your locales and their interactions. Images and slugs stay as they are, because the Webflow API doesn't localize them. Switch locale in the Designer to review the translations, then publish your site.
The first screen then shows your site's locales only. If you prefer separate pages, click Use separate pages instead under Select pages. Languages that are already locales on your site aren't offered for separate pages, because their folder would share the locale's URL. Click Use my Webflow locales instead to come back.
3. Translate your pages
- Publish first. Publish your site to its webflow.io domain before you translate. The app reads each source page there to carry over its animations, and it stops before changing anything if a selected page isn't published.
- Languages. Check the source language at the top, then pick one or more target languages from the 55 available.
- Pages. All static pages are selected. Uncheck the ones you want to leave out. The app lists the pages it will create, like
/fr/about. - Translate. Pick Instant translation (included, nothing to set up) or your own DeepL API key, then click Translate.
- Keep the Designer tab visible until the run ends. Plan about 1 minute per page for each language, and more when the Designer slows down.
- Publish your site to put the new pages online.
4. What gets created
- A folder per language (
/fr,/de…) with a copy of each selected page and its text translated. - A translated copy of your navigation and footer components, used by the language pages.
- Internal links that point to the matching language.
- Translated page titles and SEO descriptions.
The translated pages are normal Webflow pages. You can edit them in the Designer like any other page.
5. Language switcher
The language switcher is part of PRO. A free translation creates the language pages without it: visitors reach them through their links, and search engines through the sitemap.
The switcher shows wherever you place its component. It lists the languages of your site and links to the same page in each language, or to that language's home page when the page isn't translated.
To place it, select an element in your navbar in the Designer and click Place the language switcher on the app's last screen. The app adds a "Language switcher" component there: in a navbar shared by all pages, it shows everywhere. Then publish. Without that component, the switcher doesn't show. If your template has two navbars, one per screen size, it goes in the one that is visible.
6. Interactions
Webflow interactions are tied to the page they were built on. The app copies each page with its element IDs and adds a small script in the head of each translated page. Before Webflow's interaction engine starts, this script gives the page the ID of its source page, so the engine runs the source page's interactions on the copied elements. It never scrolls the page and never edits the engine's data.
This relies on how Webflow's published runtime matches interactions to pages. A change on Webflow's side could stop the animations of translated pages; their text and links would keep working. Interactions added directly to a translated page don't run: edit them on the source page.
Interactions that run on one page only (scoped GSAP interactions) can't be copied through Webflow's API. After a translation, the app lists them and tells you which ones to open. In the Interactions panel, add the translated page to each one's pages, then publish.
7. Sitemap for Google
- Open the app menu and click Sitemap for Google.
- Copy the sitemap. It links every page to its translations with hreflang tags.
- In Webflow, open Site settings, then SEO. Turn off Auto-generate sitemap and copy the sitemap into the sitemap field.
- Publish your site.
A custom sitemap needs a custom domain on a paid site plan. Once the translated pages are published, search engines can index them. The sitemap helps them find the pages, but search engines decide what they index.
8. Free and PRO
| Free | PRO | |
|---|---|---|
| Languages | One language per run | Every language |
| Pages | Every static page you select | Every static page you select |
| Instant translation | Included for your first run only | Included up to 500,000 characters a month |
| Your own DeepL key | Yes | Yes |
| Language switcher | No | Yes |
| Price | Free | €49 one-time per site |
The 500,000 characters count the text sent to Instant translation in the month. Beyond that, add your own DeepL key. DeepL applies its own quota to your key.
To activate PRO, click the FREE badge at the top of the app, enter your key under "Already have a key?" and click Activate.
9. Remove or uninstall
On a site that uses Webflow Localization, the app adds no script. There is nothing to remove, and the translations stay in your locales after you uninstall. What follows is about separate pages.
There are two separate steps. Removing the app's scripts takes the app's code off your pages. Uninstalling removes the app's access to your site in Webflow.
Remove the app's scripts
In the app menu, click Remove the app's scripts. The app removes the scripts it added to your pages: the animations of the language pages and the language switcher. Then publish your site. Until you publish, the published pages keep the scripts.
Uninstall the app in Webflow
Webflow does not tell the app about an uninstall and keeps its code on your site. If you uninstall without removing the scripts first, they stay on your pages and keep running: reinstall the app and remove them from its menu. That is why the order below matters.
- In the app menu, click Remove the app's scripts.
- Publish your site.
- Uninstall the app in Webflow, from Apps & Integrations.
What stops working
- The language switcher, on every page.
- The animations the app carried over to the language pages. Check those pages after removal.
- Translation, sitemap generation and the other app features.
What stays on your site
- The script files the app registered for the site. They stay listed under Custom Code in Site settings, because the app does not edit that list.
- The translated pages (
/fr/about…) with their translated text. They are normal Webflow pages. Delete them in the Pages panel if you do not want them. - The translated copies of the Navbar and Footer.
- The empty div with the
data-pt-switcherattribute, if you placed the switcher. Delete it in the Designer if you do not want it. - Any sitemap you copied by hand into the SEO settings. It keeps listing the language pages. Turn Auto-generate sitemap back on, or edit the field, if you do not want it.
- Interactions you added by hand to the language pages.
10. Limits
- CMS collection pages aren't translated yet.
- Two pages with the same URL name in different folders (
/company/overviewand/services/overview) can't be translated together: change the slug of one of them. - The language switcher is part of PRO.
- The Designer tab has to stay visible during a translation. Publish the site when the run ends.
- Interactions that run on one page only (GSAP) need a manual step on each language page.
- The free plan translates one language per run. Instant is included for your first run only.
- Translated pages can be indexed once they are published. Search engines decide what they index.
- Read the translations before you publish, especially legal or commercial text.
11. Support
Email pro.allali.ilies@gmail.com. See also the privacy policy, the terms and the refund policy.