- Multilingual
How to Set Up Weglot on a Webflow Nonprofit Website
Key takeaways
- Weglot connects to Webflow via a script embed in the head, as there is no native integration.
- Decide the URL structure before installing. Weglot's Webflow guide leads with subdomains (one CNAME record per language), subdirectories need Weglot's support team to set up, and Google ranks neither structure above the other.
- Machine translations need human review, especially medical, legal, safeguarding, and sector-specific terminology.
- Prioritise reviewing navigation, homepage, programme pages, contact details, and legally significant language before going public.
- Exclude unneeded content and pages to keep word counts and plan costs down.
- Weglot cannot translate text inside images, PDF documents, or donation platform modals and iframes.
Summary
Step-by-step guide to installing and configuring Weglot on a Webflow nonprofit website: script installation, URL structure, translation editing, and what to check before going live.
Before You Start
This guide covers the Webflow-side installation of Weglot and the initial configuration in the Weglot dashboard. It doesn't cover choosing whether Weglot is the right multilingual approach for your organisation; that is covered in Multilingual Nonprofit Websites: Webflow Native, Weglot, or Google Translate?
What you need before starting:
- A Weglot account with a plan that covers the languages and word count your site requires
- A Webflow site on a paid Site plan with a custom domain connected and published (custom code needs a Site plan)
- Admin access to the Webflow site
- A clear decision on URL structure, subdomain or subdirectory (covered below)
Step 1: Get Your Weglot API Key
After creating a Weglot account and starting a plan, create a project for the site in the Weglot dashboard. Weglot generates an API key for each project and shows it there.
Copy this key. You'll need it in the next step.
Step 2: Add the Weglot Script to Webflow
There is no native integration between Weglot and Webflow: the connection is a script embed in Webflow's custom code settings, given in Weglot's Webflow setup guide (updated November 2025).
In Webflow, navigate to Site Settings → Custom Code → Head Code.
Add the Weglot initialisation script with your API key, then save and publish the Webflow site. Weglot loads from the <head> so it can intercept and translate content before the page renders.
After publishing, visit your site. A Weglot language switcher widget should appear on the page, at the bottom right by default. If it appears, Weglot is installed and active.
Step 3: Decide on URL Structure (Subdirectory or Subdomain)
This is the most important configuration decision, and Weglot asks for it during project setup, so decide before translating any content.
Subdirectory structure places translated content at a path beneath your main domain: yourcharity.org.uk/fr for French, yourcharity.org.uk/es for Spanish. On Webflow this is the harder setup: Weglot's subdirectory guide tells you not to repoint your main DNS record at Weglot (that would take the site off Webflow) but to email support@weglot.com, who set it up with your records still pointing at Webflow.
Subdomain structure places translated content at a subdomain: fr.yourcharity.org.uk. This is what Weglot's Webflow setup guide leads with: one CNAME record per language.
Either way, Weglot serves indexable translated pages with hreflang tags. The idea that subdirectories inherit the main domain's authority while subdomains start from nothing is SEO folklore: Google's guidance on multi-regional and multilingual sites lists both as workable and ranks neither above the other.
Which to use: the choice is not an SEO one. Neither structure ranks above the other, and Weglot serves indexable pages with hreflang tags either way. What differs is the setup cost and who has to be involved. A subdomain you can do yourself: one CNAME record per language, the same process described in How to Connect Your Domain to Webflow via DNS. A subdirectory keeps every language under the one domain, but it cannot be self-served on Webflow, because Weglot's support team has to configure it and your DNS has to keep pointing at Webflow. Decide on those grounds.
Step 4: Add Your Languages in the Weglot Dashboard
Weglot asks for your original and target languages when you create the project; add more later under Translations → Languages.
Weglot generates translations page by page as someone visits it in a translated language, including search engine bots. Each word counts once per language (an 8,000-word site in three languages is about 24,000 translated words), page titles and alt text count too, and the total is a fixed plan limit that does not renew (Weglot pricing, September 2026), so the count only grows.
Step 5: Review and Edit Translations
Machine translation requires human review before it's published. Medical terms, legal language, safeguarding terminology, programme names and sector-specific vocabulary are where it commonly produces errors.
In Weglot, go to the Translation List, select the language pair and edit the right-hand column. Changes are saved automatically and displayed on your website, without a Webflow publish.
What to prioritise in the review:
- Navigation labels: these appear on every page
- Homepage hero text and primary calls to action
- Programme or service descriptions
- Contact page content
- Any legally significant language: privacy policy, terms, safeguarding statements
- Donation page content
Step 6: Configure the Language Switcher
Weglot adds a language switcher widget automatically. In the Weglot dashboard under Settings → Language switcher, choose flags, language codes or full names, and a list or dropdown, and add custom CSS.
Ensure the switcher has sufficient colour contrast against the page background: 4.5:1 for normal-size text under WCAG 2.2 success criterion 1.4.3 Contrast (Minimum), Level AA.
To place it somewhere specific, such as the header navigation, add <div id="weglot_here"></div> where you want it in a Webflow Embed element.
Step 7: Exclude Pages or Content from Translation
Weglot translates everything it can access by default, which increases your word count and plan costs.
In the Weglot dashboard under Settings → Translation exclusions, add URL rules (a "Starts with" rule for /blog/ keeps blog content in English only) or CSS selectors for specific blocks.
Decide on exclusions before the translated pages are first visited: an exclusion added later does not delete translations already generated unless you tick that option in a URL rule.
Step 8: Test Before Promoting
Before publicising the translated version, test thoroughly:
- Visit the site and switch to each translated language
- Navigate through all core pages and confirm translated content appears correctly
- Check that forms still work in translated mode
- Check that the donation form or button works correctly
- Confirm the URL structure matches your configuration
- Test on mobile: confirm the language switcher is accessible at small screen widths
- Run a keyboard navigation test: can you reach and activate the switcher without a mouse?
What Weglot Doesn't Translate
Text within images. Weglot translates HTML text, not image content. Use HTML text over images rather than text embedded in image files. If an image must differ by language, Weglot can swap in a translated file.
Donation platform content. The donation modal or iframe is served by the donation platform, not your Webflow site, and Weglot cannot translate an iframe unless you control it and install the snippet inside it. If translated donation forms are required, configure this within the platform itself.
PDF documents. Linked PDFs remain in their original language; the same media swap can link a translated PDF you have produced separately.
Further Reading
Free download
Your website, for the board.
A two-page briefing you can fill in and put in the next board pack. It covers the six things funders check, how to see what AI tools say about you, and the options to put to trustees.
That did not send. Email hello@socialectric.com and I will send you the briefing.
Frequently asked questions
- How does Weglot connect to a Webflow site?
There is no native integration between the two; the connection is a script embed. Weglot generates an API key for your project and shows it in the dashboard. Add the Weglot initialisation script with that key to Site Settings → Custom Code → Head Code in Webflow, then save and publish. It loads from the head so Weglot can intercept and translate content before the page renders. If a language switcher widget appears on the published site, at the bottom right by default, Weglot is installed and active.
- Should translated pages sit on a subdirectory or a subdomain?
Either works, and the difference is not SEO. Search engines do not treat a subdomain as a site starting from nothing: Weglot serves indexable translated pages with hreflang tags on both structures, and Google's guidance lists both as workable and ranks neither above the other. A subdirectory puts translated content beneath your main domain, such as yourcharity.org.uk/fr. What separates them on Webflow is the setup: subdomains are the simpler one (one CNAME record per language, the same process as connecting your domain to Webflow via DNS); subdirectories need Weglot's support team to configure so that your DNS keeps pointing at Webflow. Decide before translating any content, because Weglot asks for the structure during project setup.
- Do we have to review Weglot's machine translations?
Yes: machine translation requires human review before it is published to a live audience, and medical terms, legal language, safeguarding terminology, programme names and sector-specific vocabulary are where automated translation commonly produces errors. In the Weglot dashboard's Translation List you get a side-by-side view of original and translated text and can edit any translation in the right-hand column; changes save immediately and appear on the live site without a Webflow publish. Prioritise navigation labels, homepage hero text and primary calls to action, programme descriptions, contact page content, legally significant language and donation page content, and review core pages before the translated version is promoted publicly. Who owns that review is a governance question, covered in multilingual website governance for international NGOs.
- How do we stop Weglot translating everything?
Weglot translates everything it can access by default, which increases your word count and your plan costs. Under Settings → Translation exclusions in the Weglot dashboard you can add URL rules (a "Starts with" rule for /blog/ keeps blog content in English only, for example) or CSS selectors to exclude specific blocks. Decide on your exclusions before the translated pages are first visited, because an exclusion added later does not remove translations already generated.
- What should we test before promoting the translated site?
Switch to each translated language and navigate all core pages to confirm the content appears correctly, check that forms still work in translated mode, and check the donation form or button works. Confirm the URL structure matches your configuration, test on mobile that the language switcher is usable at small screen widths, and run a keyboard navigation test to confirm you can reach and activate the switcher without a mouse. The switcher also needs sufficient colour contrast against the page background to meet WCAG 2.2 AA.
- What does Weglot not translate?
Text inside images, because Weglot translates HTML text rather than image content, which is a reason to use HTML text over images rather than text embedded in image files. Donation platform content is not translated either: the donation modal or iframe is served by the donation platform rather than your Webflow site, and Weglot cannot reach inside an iframe unless you control it and install its snippet there, so if you need translated donation forms you configure that within the platform itself. Linked PDF documents remain in their original language, although Weglot can point a translated page at a translated PDF you have produced separately.