How to Set Up Weglot on a Webflow Nonprofit Website
How to Set Up Weglot on a Webflow Nonprofit Website
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's 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 hosting plan with a custom domain connected and published
- Admin access to the Webflow site
- A clear decision on URL structure — subdirectory or subdomain (covered below)
Step 1: Get Your Weglot API Key
After creating a Weglot account and starting a plan, log into the Weglot dashboard. Your API key is displayed in the Setup or Installation section — it's a string that looks like wg_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
Copy this key. You'll need it in the next step.
Screenshot placement: [Screenshot showing the Weglot dashboard Setup or Installation section with the API key field visible]
Step 2: Add the Weglot Script to Webflow
There is no native integration between Weglot and Webflow — the connection is made via a script embed in Webflow's custom code settings, the same method used for GTM and other third-party tools.
In Webflow, navigate to Site Settings → Custom Code → Head Code.
Add the following script, replacing YOUR_API_KEY with the key from your Weglot dashboard:
html
<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script><script> Weglot.initialize({ api_key: "YOUR_API_KEY" });</script>Save the settings and publish the Webflow site. Weglot loads from the <head> so it can intercept and translate content before the page renders — this is why it goes in Head Code rather than Footer Code.
Screenshot placement: [Screenshot showing Webflow Site Settings with the Head Code field and the Weglot script added]
After publishing, visit your site. A Weglot language switcher widget should appear on the page — typically in the bottom-right corner 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 in the Weglot setup and should be made 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. The translated pages are part of your main domain, which means they inherit its domain authority. This is better for SEO — translated pages can rank in search results and contribute to the authority of your overall domain.
Subdomain structure places translated content at a subdomain: fr.yourcharity.org.uk. Search engines treat subdomains as separate sites, so translated content on a subdomain starts with no inherited authority. This is generally weaker for SEO than subdirectory, though Weglot still applies hreflang tags in both configurations.
Which to use: Subdirectory is recommended for any organisation where multilingual SEO is a goal — reaching French or Spanish-speaking audiences through organic search. Subdomain is simpler to configure on some DNS setups but comes with the SEO trade-off.
How to configure URL structure in Weglot:
In your Weglot dashboard, navigate to Settings → URL structure or the equivalent section. Select your preferred option — subdirectory or subdomain. Check whether subdirectory configuration is available on your current plan, as some lower-tier plans only offer subdomain.
If you select subdomain, you'll need to add a DNS record for each language subdomain — for example a CNAME record pointing fr.yourcharity.org.uk to Weglot's servers. Weglot's documentation provides the exact record values. This is done in your domain registrar's DNS settings, using the same process described in How to Connect Your Domain to Webflow via DNS.
Screenshot placement: [Screenshot showing the Weglot dashboard URL structure settings with subdirectory option selected]
Step 4: Add Your Languages in the Weglot Dashboard
In the Weglot dashboard, navigate to the Languages or Translations section. Add each language you want to support. Weglot will begin scanning your site's content and generating machine translations automatically.
The initial scan may take a few minutes depending on the size of your site. Once complete, Weglot displays a word count — this is the number of words it has detected and translated, which determines which pricing tier you need.
Screenshot placement: [Screenshot showing the Weglot dashboard Languages section with one or more languages added and a word count displayed]
Step 5: Review and Edit Translations in the Weglot Dashboard
Machine translation — even good machine translation — requires human review before it's published to a live audience. Medical terms, legal language, safeguarding terminology, programme names, and any sector-specific vocabulary are areas where automated translation commonly produces errors or awkward phrasing.
In Weglot, go to Translations and select the language you want to review. Weglot displays a side-by-side view of the original text and the translated version. Click any translation to edit it directly. Changes save immediately and appear on the live site without requiring a Webflow publish.
This is one of Weglot's practical advantages over Webflow native localisation: the translation editing interface is simple enough for a non-technical team member — a Communications Manager or a bilingual programme officer — to use without any Webflow access. They log into Weglot, find the text they want to correct, and edit it.
Screenshot placement: [Screenshot showing the Weglot Translations dashboard with original English text on the left and translated text on the right, with an edit field active]
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, including any text adjacent to the donation form
Blog posts and resource articles can be reviewed progressively over time. Core pages should be reviewed before the translated version is promoted publicly.
Step 6: Configure the Language Switcher
Weglot adds a language switcher widget to your site automatically. By default this appears as a floating button, typically in the bottom corner of the page.
In the Weglot dashboard under Appearance or Widget, you can customise:
- Position on the page
- Display style — flag icons, language names, or both
- Colours to match your brand
For most nonprofit sites I keep the switcher visible and accessible but unobtrusive — it doesn't need to compete with the site's primary navigation or calls to action. Ensure the switcher has sufficient colour contrast against the page background to meet WCAG AA requirements.
Weglot also supports placing the language switcher in a specific location on the page rather than as a floating widget — useful if you want it integrated into the header navigation. This requires adding a small piece of HTML to a Webflow embed element at the location where you want the switcher to appear. Weglot's documentation provides the exact snippet.
Screenshot placement: [Screenshot showing the Weglot dashboard Appearance settings with switcher position and style options visible]
Step 7: Exclude Pages or Content from Translation
Not all content on your site needs to be translated. Weglot translates everything it can access by default, which increases your word count and therefore your plan costs.
In the Weglot dashboard under Exclusions, you can specify:
- URL patterns to exclude — for example, exclude
/blog/to prevent blog posts from being translated. Use this if you want to keep blog content in English only. - CSS selectors to exclude — for example, exclude a specific element class to prevent a dynamic embed or a third-party widget from being included in the word count
Decide on exclusions before Weglot's initial scan if possible. If the scan has already run, removing excluded content from the translation count may require a re-scan — check Weglot's current dashboard options for this.
Screenshot placement: [Screenshot showing the Weglot Exclusions settings with a URL pattern entered]
Step 8: Test Before Promoting
Before publicising the translated version of your site, test it thoroughly:
- Visit your site and switch to each translated language using the language switcher
- Navigate through all core pages — confirm translated content appears correctly
- Check that forms still work in translated mode — form fields, labels, and submit buttons
- Check that the donation form or button works correctly — Weglot translates surrounding text but the donation modal or iframe itself is served by the donation platform
- Confirm the URL structure matches your configuration — subdirectory or subdomain as intended
- Test on mobile — confirm the language switcher is accessible and functional at small screen widths
- Run a quick keyboard navigation test — can you reach and activate the language switcher without a mouse?
If any translated page shows untranslated content, it may be content that Weglot couldn't detect — typically text within images, embedded iframes, or JavaScript-rendered content. These require manual handling: either providing translated versions of images separately, or adding translated text via Weglot's manual translation entry.
What Weglot Doesn't Translate
Understanding the limits of what Weglot can reach prevents surprises after launch:
Text within images — Weglot translates HTML text, not image content. If your homepage hero contains a text overlay baked into an image, that text won't be translated. Use HTML text over images rather than text embedded in image files where possible.
Donation platform content — The donation modal or iframe is served by Fundraise Up, Donorbox, or Enthuse, not your Webflow site. Weglot can't translate content inside third-party iframes. If translated donation forms are required, this is configured within the donation platform itself — check whether your platform supports translated campaign forms.
PDF documents — Weglot doesn't translate linked PDF files. Annual reports, programme guides, and other PDFs linked from the site remain in their original language.
Further Reading
Eric Phung has 7 years of Webflow development experience, having built 100+ websites across industries including SaaS, e-commerce, professional services, and nonprofits. He specialises in nonprofit website migrations using the Lumos accessibility framework (v2.2.0+) with a focus on editorial independence and WCAG AA compliance. Current clients include WHO Foundation, Do Good Daniels Family Foundation, and Territorio de Zaguates. Based in Manchester, UK, Eric focuses exclusively on helping established nonprofits migrate from WordPress and Wix to maintainable Webflow infrastructure.
Not sure where your site currently stands?
A Blueprint Audit tells you exactly what needs to change — and why.
Before implementing anything new, it's worth knowing what your current site is and isn't doing for your stakeholders. The Blueprint Audit gives you that clarity in two to three weeks.
Related Resources
Using AI Tools for Nonprofit Website Content: A Practical Guide
A practical guide to using AI writing tools on nonprofit website content — what they're genuinely useful for, where human review is non-negotiable, and the governance questions your organisation needs to answer before using them.
Accessibility Statement Template for Nonprofit Websites
A ready-to-use accessibility statement template for nonprofit and charity websites — including what to include, how to structure it, and how to keep it current.
Website Performance Monitoring for Nonprofits: Metrics That Matter
A practical guide to website performance monitoring for nonprofit organisations — covering which metrics to track, which tools to use, and how to build a sustainable quarterly review cadence.
Join our newsletter
Subscribe to my newsletter to receive latest news & updates
