Website Translator: Translate Website with No Code Changes

Website translator is a tool that localizes websites with automatic synchronization between your site content and a translation management system. Our app eliminates the need for manual content extraction. This allows you to translate entire websites faster and easier, without the need for technical expertise or code changes.

The Website Translator app seamlessly integrates with leading Digital Experience Platforms (DXPs) and CMS solutions. Easily localize your content across a wide range of supported services, including:

Website Translator Overview

Features

• Source and translated content synchronization - Detect, extract, and sync your website content with Crowdin project
• SEO-friendly translations - Translate meta titles and descriptions
• Scheduled synchronization - Automatic sync and publishing scheduling
• Instant translations - Use machine translation (DeepL) for new content instant translation
• In-context preview - Preview translations on your website
• Application modes - 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 - Review and approve new content before translation

How the Website Translator Works

1. Setup: Input your website URL and translation preferences
2. Scanning: The app crawls your website and extracts all translatable texts
3. Import: You select pages that are then imported into your Crowdin project as translation files
4. Content Translation
5. Publishing Translations
6. Integration: Add a JavaScript snippet to enable the language switcher for visitors

Translation Configuration

Choose the way to scan your website content:

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

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), separate with commas.

Paths Filter

Control which pages are crawled. Use pattern matching:

• /about - Exact page /about
• /page/** - All pages starting with /page/
• /article/* - One level above /article/
• /**/comments - Pages which end with /comments
• !/admin - Excludes the /admin page

Instant Translations

Set up DeepL API integration for instant translation of new content in client-side mode. This allows users see translated content before it's imported into Crowdin.

Website Translation Automation

Set up auto synchronization and publishing schedules:

• Source sync schedule: Choose manual, daily, or weekly synchronization
• Publishing schedule: Select to publish manually, hourly, daily, or weekly

Language Routing Method

Choose how languages are specified in your website URLs:

• Query Parameter (test-site.com?lng=en)
• Subdomain (en.test-site.com)
• Subdirectory (test-site.com/en)

Variables

Create reusable translation patterns with placeholders to replace similar strings. For example, "Hello Antony!" and "Hello Mary!" 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 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 that were detected by the 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 on your website and see how they look in context. Requirement: enabled 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
2. Publish translations
3. Monitor and maintain

Q&A

Q: Some texts on my website (such as newly added elements, dynamic content, or pop-ups) remain untranslated on the live site, even though the publishing logs show no errors. How can I fix this?

A: This might happen in any application mode when new text appears on your website but hasn't been scanned and imported into your Crowdin project yet. The steps to resolve this depend on the Application mode you are currently using:

If you use Server-side mode:

1. Open your Crowdin project and go to the Integrations tab.
2. Open the Website Translator app and navigate to the URLs tab.
3. Select the pages containing the missing translations and click Re-import. Alternatively, wait for your automated Source sync schedule to run.
4. Translate and approve the newly imported strings in your Crowdin project.
5. Go to the Home tab and click Publish Now to update your live website's distribution.

If you use Client-side mode:

1. Open your Crowdin project and go to the Integrations tab.
2. Open the Website Translator app and navigate to the Review tab.
3. Select the pending strings (which were detected whenever visitors opened a page with untranslated text) and import them into your project.
4. Translate and approve the newly imported strings.
5. Return to the Home tab and click Publish Now.

If you use Server & Client-side mode: You can use either of the methods described above, depending on whether the text was crawled by the server or detected by a visitor's browser.