Integrations
Verbi supports Framer sites. Your Framer project stays exactly as it is — no duplicate projects, no plugins, no CMS edits. Translation is handled entirely at the proxy layer.
How It Works with Framer
Verbi sits between your visitors and Framer's hosting. Instead of your domain pointing to Framer, it points to Verbi's proxy. Verbi fetches your site from Framer, translates it, and serves the result — with full SEO, edge caching, and a language switcher.
Your Framer project continues to be the source of truth. Any changes you publish in Framer are picked up automatically on the next uncached request.
Setup
1. Find Your Framer Hosting URL
Before setting up DNS, you need your site's Framer hosting URL — the address Framer uses to serve your site before a custom domain is connected. It looks like:
text
yoursite.framer.app
yoursite.framer.website
You can find this in your Framer project under Site Settings → General. This will be your origin host in Verbi.
2. Add Your Site in Verbi
Go to your Verbi dashboard and click New Site. Enter your custom domain (e.g. yoursite.com) and select your target languages. In the Origin hostname field, enter your Framer hosting URL (e.g. yoursite.framer.app).
3. Update DNS
Point your domain to Verbi's proxy instead of Framer. In your DNS provider, add:
| Type | Name | Target |
|---|---|---|
CNAME | yoursite.com | proxy.verbi.io |
If you previously had a CNAME pointing to Framer, replace it with this one.
Your Setup tab also lists one or more TXT records to add — these issue your SSL certificate. Add every record shown and leave them in place. See DNS Setup for details.
Do not connect your custom domain inside Framer's site settings. Framer should only serve your site from its default hosting URL — Verbi handles the custom domain routing.
4. Verify
Once DNS propagates, click Verify Connection in your Verbi dashboard. Your translated pages are live at yoursite.com/fr/, yoursite.com/de/, and so on.
Framer-Specific Behaviour
Span Reassembly
Framer's rendering engine wraps each word in its own <span> element. Verbi detects this pattern and reassembles the full sentence before sending it for translation, so translations read naturally rather than word-by-word.
SPA Navigation
Framer sites use client-side routing — navigating between pages doesn't trigger a full page reload. Verbi injects a router patch that keeps the language prefix in the URL during in-app navigation, so /fr/about stays /fr/ when a visitor clicks to /fr/pricing.
Dynamic Content
Content that Framer renders after the initial page load — animated sections, lazy-loaded components — is translated client-side using the same translation dictionary built at request time.
Language Switcher in Framer
The easiest option is Verbi's built-in floating widget, which requires no changes to your Framer project.
If you want to build a language selector directly in Framer using native components, disable the built-in widget in Settings → Behaviour and add links to the translated URLs manually. The pattern is always /{lang-code}/{path} — for example, a link to /fr/ for French and /de/ for German.
Publishing Updates
Whenever you publish changes in Framer, Verbi picks them up automatically on the next request. If you want translated pages to reflect changes immediately, purge the cache from your dashboard after publishing.