Page Translator for Webflow

1. Install the app

1. Install Page Translator from the Webflow Marketplace.
2. Webflow asks which sites the app can access. Pick your site and click Authorize App. Clicking Cancel installs nothing.
3. 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

1. 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.
2. Languages. Check the source language at the top, then pick one or more target languages from the 55 available.
3. 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.
4. Translate. Pick Instant translation (included, nothing to set up) or your own DeepL API key, then click Translate.
5. 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.
6. 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

1. Open the app menu and click Sitemap for Google.
2. Copy the sitemap. It links every page to its translations with hreflang tags.
3. In Webflow, open Site settings, then SEO. Turn off Auto-generate sitemap and copy the sitemap into the sitemap field.
4. 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

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. Retirer ou désinstaller

Sur un site qui utilise Webflow Localization, l'app n'ajoute aucun script : il n'y a rien à retirer, et les traductions restent dans vos locales après la désinstallation. Ce qui suit concerne les pages séparées.

Il y a deux gestes différents. Le premier retire les scripts de l'app. Le second révoque l'accès de l'app à votre site, dans Webflow.

Retirer les scripts de l'app

Dans le menu de l'app, cliquez sur Retirer les scripts de l'app. L'app retire les scripts qu'elle a posés sur vos pages : les animations des pages de langue et le sélecteur de langue. Publiez ensuite le site, sinon les pages en ligne gardent les scripts jusqu'à la prochaine publication.

Désinstaller l'app dans Webflow

Webflow ne prévient pas l'app d'une désinstallation et garde son code sur votre site. Si vous désinstallez sans retirer les scripts, ils restent sur vos pages et continuent de tourner : réinstallez l'app et retirez-les depuis son menu. D'où l'ordre ci-dessous.

1. Dans le menu de l'app, cliquez sur Retirer les scripts de l'app.
2. Publiez le site.
3. Désinstallez l'app dans Webflow, à partir de Apps & Integrations.

Ce qui cesse de fonctionner

• Le sélecteur de langue, sur toutes les pages.
• Les animations que l'app avait reportées sur les pages de langue. Vérifiez ces pages après le retrait.
• La traduction, la génération du sitemap et les autres fonctions de l'app.

Ce qui reste sur votre site

• Les fichiers de script enregistrés pour le site. Ils restent listés sous Code personnalisé dans les réglages du site, car l'app ne modifie pas cette liste.
• Les pages traduites (/fr/about…), avec leur texte traduit. Elles restent des pages Webflow normales. Supprimez-les dans le panneau Pages si vous n'en voulez plus.
• Les copies traduites de la Navbar et du Footer.
• Le div vide data-pt-switcher posé à l'emplacement du sélecteur, s'il y en a un. Supprimez-le dans le Designer si vous n'en voulez plus.
• Le sitemap collé à la main dans les réglages SEO du site, si vous l'avez fait. Il continue de lister les pages de langue. Réactivez la génération automatique du sitemap, ou modifiez le champ, si vous ne voulez plus de ce sitemap.
• Les interactions que vous avez ajoutées à la main sur les pages de langue.

10. Limites

• Les pages de collection CMS ne sont pas encore traduites.
• Deux pages qui ont le même nom d'URL dans des dossiers différents (/company/overview et /services/overview) ne peuvent pas être traduites ensemble : changez le slug de l'une d'elles.
• Le sélecteur de langue fait partie de PRO.
• L'onglet du Designer doit rester visible pendant une traduction, puis publiez le site.
• Les interactions qui ne tournent que sur une page (GSAP) sont à ajouter à la main sur chaque page de langue.
• Le gratuit traduit une langue à la fois. Instant est inclus pour la première traduction seulement.
• Les pages traduites sont indexables une fois publiées. Google décide ensuite de ce qu'il indexe.
• Relisez les traductions avant de publier, surtout les textes juridiques ou commerciaux.

11. Support

Email pro.allali.ilies@gmail.com. See also the privacy policy, the terms and the refund policy.