Website Translator Integration

The Website Translator integration is a powerful tool that seamlessly localizes websites by automatically synchronizing content with Crowdin translation projects. It eliminates the need for manual content extraction and translation management, allowing you to easily translate entire websites without requiring technical expertise or code changes.

Features at a glance

• Source and translated content synchronization - Automatically detect, extrct, and sync your website content with Crowdin project
• SEO-friendly translations - Translate meta titles and descriptions for better search engine optimization
• Scheduled synchronization - Set up automatic sync and publishing schedules
• Instant translations - Use DeepL for immediate translation of new content
• In-context preview - Preview translations directly on your website
• Multiple application modes - Choose between server-side, client-side, or hybrid scanning
• Advanced filtering - Configure CSS selectors and path filters for precise content control
• Variable patterns - Create reusable translation patterns with placeholders
• Review system - Manage and approve new content before translation

How does the Website Translator integration work?

1. Setup: Configure your website URL and translation preferences
2. Scanning: The app crawls your website and extracts all translatable texts
3. Import: Selected pages are imported into your Crowdin project as translation files
4. Translation: The content is translated in Crowdin
5. Publishing: Translated content is published and distributed to your website
6. Integration: Add a JavaScript snippet to enable the language switcher for visitors

Translation Configuration

Application Mode

Choose how the application scans your website content:

• Server-side (Default): Crowdin crawls your website and looks for new content to translate
• Client-side: Untranslated text detected when visitors open pages is sent to Crowdin
• Server & Client-side: Combines both approaches for comprehensive coverage

CSS Selectors to Ignore

Specify CSS selectors for HTML elements whose content should not be imported. Use IDs (e.g., #header-nav) or classes (e.g., .no-translate) separated by commas.

Paths Filter

Control which pages are crawled using pattern matching:

• /about - Matches exact page /about
• /page/** - Matches all pages starting with /page/
• /article/* - Matches one level above /article/
• /**/comments - Matches pages ending with /comments
• !/admin - Excludes the /admin page

Instant Translations

Configure DeepL API integration for immediate translation of new content in client-side mode. This ensures users see translated content instantly before it's imported into Crowdin.

Automation

Set up automatic synchronization and publishing schedules:

• Source sync schedule: Choose manual, daily, or weekly synchronization
• Publishing schedule: Select manual, hourly, daily, or weekly publishing

Language Routing Method

Choose how languages are specified in your website URLs:

• Query Parameter (Default): Language specified as URL parameter (e.g., test-site.com?lng=en)
• Subdomain: Language as subdomain (e.g., en.test-site.com)
• Subdirectory: Language as subdirectory (e.g., test-site.com/en)

Variables

Create reusable translation patterns with placeholders to replace similar strings. For example, "Hello John!" and "Hello Jane!" can be replaced with "Hello {{name}}!". Changes are applied after reimporting your website.

Review Strings

In client-side mode, review and manage texts that were missed during initial scanning. These appear when visitors use your site and can be imported to Crowdin for translation or deleted if not needed.

URLs Management

View and manage all URLs detected from your site scan:

• Scan website - Discover new pages to translate
• Re-import - Update existing pages with new content
• Delete - Remove pages from your Crowdin project
• Filter and sort - Organize pages by path, import date, or string count

In-Context Preview

Preview translations directly on your website to see how they look in context. This feature requires enabling in-context translation for your Crowdin project.

Code Snippet

After publishing translations, add this JavaScript snippet to your website to enable the language switcher:

<style>.js-proxy-blur {filter: blur(5px);}</style>
<script>
  // Generated script with your project configuration
  // Includes language switcher and translation functionality
</script>

Also add the js-proxy-blur class to your <body> tag:

<body class="js-proxy-blur">

Next Steps

1. Choose translation strategy - Select the approach that best fits your needs
2. Publish translations - Distribute completed translations to your website
3. Monitor and maintain - Use the review system to catch new content and keep translations up to date

For more information about translation strategies, visit the Crowdin documentation.