ConveyThis

How to integrate ConveyThis with Webflow

Webflow sites need translation capabilities for international audiences, but building custom language switching systems requires significant development time. ConveyThis provides two integration paths: a JavaScript widget that handles translation automatically, and REST APIs for custom workflows that need programmatic control over translation processing and content synchronization.

The JavaScript method works for most sites that need quick multilingual deployment. API integration makes sense when you need custom translation workflows, CMS synchronization logic, or integration with existing translation management systems. The ConveyThis API documentation provides endpoints for translation processing, language validation, and system monitoring.

Add the ConveyThis JavaScript widget

The JavaScript widget translates your Webflow site automatically after you embed a code snippet in your site settings. This method requires no API knowledge and initializes translation capabilities across all pages from a single implementation.

Add the ConveyThis script to your site through Webflow's custom code settings:

1. Navigate to Site settings → Custom code
2. Paste the ConveyThis JavaScript snippet in the Head Code section:
3. <script src="//cdn.conveythis.com/javascript/conveythis.js?api_key=YOUR_API_KEY"></script>

4. Replace YOUR_API_KEY with your ConveyThis API key from your ConveyThis dashboard
5. Save settings and publish your site

The widget appears in your site after 2-5 minutes. Place the code in the head section, not the footer or body, to avoid initialization delays.

Widget capabilities:

• Automatic content detection — ConveyThis scans page text and translates it based on visitor language selection
• Language switcher UI — A widget displays available languages and updates content when visitors change languages
• Position customization — Adjust widget placement using ConveyThis position settings for precise control
• SEO optimization — The widget generates hreflang tags and creates subdirectory URLs for each language

Implementation notes:

Sites with heavy custom JavaScript should test for selector conflicts with Webflow classes. Load ConveyThis after Webflow's native JavaScript to prevent initialization issues. The widget adds approximately 8KB gzipped to page weight.

Build with Webflow and ConveyThis APIs

API integration gives you programmatic control over translation workflows and enables custom synchronization between Webflow CMS content and translated versions. Use this approach when you need server-side translation processing, custom language routing logic, or integration with translation management systems.

The Webflow Data API handles content extraction and localized content updates, while the ConveyThis API processes translations. Combine both APIs to build automated translation workflows that update multiple languages when CMS content changes.

Translate static page content

Extract text content from Webflow pages, translate it through ConveyThis, and update localized versions using the Webflow Localization API. This workflow translates landing pages, about pages, and other static content.

Start by fetching page content for your primary locale:

const pageContent = await webflow.pages.getContent(pageId, primaryLocale);


Send text segments to the ConveyThis translation endpoint:

const response = await fetch('https://api.conveythis.com/translate/', {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify({
   referrer: 'https://yoursite.com',
   target_language: 'es',
   segments: ['Welcome to our site', 'Contact us today'],
   api_key: process.env.CONVEYTHIS_API_KEY
 })
});


Update the translated content back to Webflow:

await webflow.pages.updateStaticContent(pageId, targetLocale, {
 nodes: [
   { nodeId: 'text-node-id', text: translatedContent }
 ]
});


Translation workflow features:

• Language validation — Check language support using the ConveyThis language validation endpoint before processing
• Batch processing — Send multiple text segments in one API call to reduce request overhead
• Health monitoring — Track API availability with the ConveyThis status endpoint for workflow reliability

The Localization API updates text and rich text nodes but doesn't handle image localization. Handle media separately if your content requires locale-specific images.

Synchronize CMS content translations

CMS collections need translation synchronization when editors update content. Set up Webflow webhooks to detect CMS changes and trigger translation workflows automatically.

Configure webhooks for collection item events:

await webflow.webhooks.create(siteId, {
 triggerType: 'collection_item_changed',
 url: 'https://your-server.com/webhook/translate',
 filter: { collectionId: 'your-collection-id' }
});


When webhooks fire, fetch the changed item, translate new content, and update all target locales:

async function handleCMSUpdate(webhookPayload) {
 const { itemId, collectionId } = webhookPayload;
 
 // Fetch updated content
 const item = await webflow.collections.items.getItem(
   collectionId, itemId, primaryLocale
 );
 
 // Translate to each target locale
 for (const locale of targetLocales) {
   const translations = await translateContent(item.fieldData, locale);
   
   await webflow.collections.items.updateItem(
     collectionId, itemId, locale,
     { fieldData: translations }
   );
 }
}


CMS synchronization capabilities:

• Real-time updates — Webhooks trigger within seconds of content changes for near-instant translation updates
• Selective translation — Target specific collections or fields to reduce API usage and translation costs
• Retry handling — Webflow webhooks retry failed requests with exponential backoff (see Webflow webhook documentation for details)

ConveyThis doesn't provide webhooks for translation status updates. Poll translation completion if you need status tracking before publishing updates.

Build custom language switching

Create custom language switcher UI that matches your site design using the ConveyThis languages endpoint and Webflow interactions. This approach gives you full control over switcher appearance and behavior.

Fetch available languages from ConveyThis:

const response = await fetch('https://api.conveythis.com/public/languages/');
const languages = await response.json();


Build your language switcher in Webflow using a dropdown or custom navigation. Use Webflow interactions to handle language changes and update the URL structure to match your localization pattern.

Store visitor language preferences in browser storage and set the page locale on load:

const preferredLocale = localStorage.getItem('siteLocale') || 'en';
window.location.href = `/${preferredLocale}${window.location.pathname}`;


Custom switcher features:

• Design control — Match language switching UI to your brand without widget styling limitations
• Conditional display — Show language options based on content availability or user location
• Analytics integration — Track language switching behavior through custom events

Custom switchers require more implementation work but eliminate widget dependencies and give you complete control over the translation experience.

What you can build

Integrating ConveyThis with Webflow enables multilingual sites that serve global audiences with localized content and SEO-optimized language structures.

• International e-commerce sites — Build product pages in 100+ languages like Architeg-Prints.com, which expanded into Spanish, French, and Japanese markets with improved search visibility and user experience for international buyers
• Multilingual professional services — Create law firm or medical practice sites like BraytonLaw.com (Spanish, French, Chinese) or Nevada Fertility Institute (Spanish, Mandarin, French, Arabic) that reach diverse client demographics with localized service descriptions
• Global real estate platforms — Develop luxury property listings like NestSeekers.com with English, Mandarin, Arabic, Russian, and Spanish translations that connect international buyers with high-value properties through localized search experiences
• Regional business sites — Deploy insurance or financial services sites like AIICFL.com serving Florida communities with Spanish, Haitian Creole, and Portuguese content that builds trust with local demographics through native-language communication

‍