Localize

How to integrate Localize with Webflow

Webflow sites can implement multilingual content through three distinct methods. The JavaScript embed provides automated content detection and translation delivery without code knowledge. Native Webflow localization features give you direct control over translated content within the Designer. API integrations enable custom translation workflows that connect your content management system with external translation services.

Most teams start with the JavaScript embed for quick deployment across existing sites. The automated content detection eliminates manual setup work. API integrations make sense when you need programmatic control over translation workflows or want to build custom localization tools.

Add the Localize JavaScript snippet

Add the Localize JavaScript snippet to your site's custom code section to enable automatic content translation. This method detects translatable content automatically and delivers approved translations through a language-switching widget.

Open your project settings in Webflow and navigate to Custom Code. Paste the Localize snippet into the Head Code section. The script initializes when visitors load your pages and begins detecting content for translation.

What you can do with the JavaScript integration:

• Automatic content detection — Localize scans pages as visitors view them and sends translatable text to your dashboard
• Visual translation editing — Edit translations directly within the live page context using the in-context editor
• Language widget — Display an automatic language selector using Localize.showWidget()
• Browser language detection — Redirect visitors based on their browser locale with Localize.detectLanguage()
• Image localization — Swap images and translate alt text with the localizeImages: true configuration option

After publishing your site, visit pages in different languages using the widget. Refresh pages to trigger content detection. Detected phrases appear in your Localize dashboard where you can approve or edit translations before they go live.

The International Cat Association uses this method to translate membership workflows across their site. They implemented custom CSS to reposition the language widget within their header navigation and maintain brand consistency through custom glossary controls.

JOOR processes over 125,000 daily translation calls across 9 languages using this integration method. They optimized performance by setting cacheBust: false in their configuration to reduce load times.

Use native Webflow localization features

Webflow's built-in localization features let you manage translated content directly in the Designer and CMS. You control exactly what gets translated and how it appears.

Configure your primary and secondary locales in site settings. Webflow publishes each locale to its own subdirectory like /es/ or /fr/. The platform handles SEO requirements automatically, including HTML lang tags and localized meta descriptions.

Native localization capabilities:

• Visual content editing — Translate text, images, and layouts directly in the Webflow Designer
• CMS localization — Manage translated collection items through the CMS editor
• Locale switchers — Add language selection using the native Locale List component
• RTL support — Automatic right-to-left layout adjustments for languages like Arabic and Hebrew
• URL structure — Each locale publishes to clean subdirectories for SEO benefits

This approach works best when you need full control over translation quality or work with professional translation agencies. You can combine native Webflow localization with Localize's automated translation to use AI for initial drafts and manual editing for final polish.

Build with Webflow and Localize APIs

The Webflow API and Localize API enable programmatic translation workflows. Extract content from Webflow, send it for translation, and publish localized content back to your site.

Both APIs use REST architecture with JSON responses. Webflow requires OAuth or site token authentication. Localize uses Bearer token authentication with your API private key. Rate limits are 5000 calls per hour for Localize and 60 requests per minute for Webflow's standard tier.

Extract and translate CMS content

Pull content from Webflow collections and send it to Localize for translation. This workflow works for blogs, product catalogs, or any CMS-driven content that updates frequently.

Use GET /collections/{collection_id}/items to retrieve collection items. Extract text fields you want translated. Send content to Localize using POST /projects/{project_id}/strings to add source strings to your translation project.

Retrieve completed translations with GET /projects/{project_id}/translations/{locale}. Update Webflow items using PUT /collections/{collection_id}/items/{item_id} with the cmsLocale parameter to specify the target language.

This pattern eliminates manual copying between systems. Content updates in Webflow automatically flow to your translation dashboard.

Sync page content with translation services

The Pages API lets you extract and update static page content programmatically. Use GET /pages/{page_id}/content?locale={localeId} to retrieve page DOM content for translation.

Send extracted content to Localize for processing. When translations are ready, push updates back using POST /pages/{page_id}/content?locale={localeId}. This maintains your page structure while translating text content.

Maven Clinic used an API-based approach to achieve 100% translation accuracy across their healthcare platform. They completed their localization project 2X faster than traditional methods, finishing 1 month early and 20% under budget.

Automate workflows with webhooks

Configure Webflow webhooks to trigger translation workflows when content changes. Set up webhooks for CMS item creation or updates to automatically send new content for translation.

Create webhook listeners that receive Webflow events and forward content to the Localize API. Your system can approve translations automatically using the API and publish localized content without manual intervention.

Webflow supports up to 75 webhooks per trigger type with HMAC-SHA256 validation for security. The Localize webhook system can notify your application when translations are complete, closing the automation loop.

21.co documented $300K in annual cost savings through automated translation workflows. They achieved 75% faster website launches and reduced internal stakeholder complaints by 37.5% by eliminating manual translation processes.

What you can build

Integrating Localize with Webflow enables multilingual websites that maintain consistent branding and user experience across languages while reducing translation overhead.

• Healthcare platforms: Build HIPAA-compliant patient portals with medical information translated into multiple languages, like Maven Clinic's implementation supporting sensitive healthcare content with 100% translation accuracy
• E-commerce storefronts: Create product catalogs with localized descriptions, pricing, and checkout flows that adapt to visitor location and browser language preferences
• SaaS marketing sites: Deploy landing pages and feature documentation across global markets with automated translation workflows that update when you publish new content
• Financial services portals: Maintain regulatory compliance across international markets with precise terminology management and audit trails for all translation changes