# Website Translator

> Translate your website with proxy translation technology

URL: https://store.crowdin.com/website-translator
Category: Development, Marketing, Other
Type: App
Author: Crowdin

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:

| Service Name | Category |
| :--- | :--- |
| UserVoice | Customer Feedback |
| DeveloperHub.io | Documentation |
| Framer | Design & Prototyping |
| Typedream | Website Builder |
| Ghost.org | CMS & Publishing |
| Tumblr | Microblogging |
| Unbounce | Landing Pages |
| Readme.io | API Documentation |
| Pagewiz | Landing Pages |
| Webflow | Website Builder |
| Status.io | Status Pages |
| Squarespace | Website Builder |
| Leadpages | Landing Pages |
| Instapage | Landing Pages |
| Lander | Landing Pages |
| WooCommerce | E-commerce |
| BigCommerce | E-commerce |
| StatusPage.io | Status Pages |
| Tilda | Website Builder |
| Weebly | Website Builder |

## Website Translator Overview

<div class="video"><iframe style="overflow:hidden; max-width: 68vw; max-height: 37.25vw;" height="100%" width="100%" src="https://www.youtube.com/embed/tKwPuymcXz0?si=QATjh2KdHxiUmMYN" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div>

### 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

:::note
This app uses CDN for translation delivery, which involves additional costs. These charges will be reflected in your Crowdin account based on traffic.

Learn more about [CDN Pricing](https://support.crowdin.com/cdn-distributions/#pricing) and how to [Manage Your CDN Usage](https://support.crowdin.com/cdn-distributions/#managing-your-cdn-usage).
:::

## 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

![Website translator settings](https://developers.app.crowdin.net/api/media/file/b45e92b4-f458-4ceb-bffa-5877d72ab3f1.png)

### Instant Translations

Set up [DeepL API integration](https://store.crowdin.com/deepl-translator) 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.

![Variables tab](https://developers.app.crowdin.net/api/media/file/4cd93172-bfac-48ff-90bf-d53231ebf549.png)

## 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.

![Review tab](https://developers.app.crowdin.net/api/media/file/cbc333b0-5dcb-4006-a2c8-0ff7bc5fd4ba.png)

## 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

![URLs tab](https://developers.app.crowdin.net/api/media/file/ecf20c8a-4e85-4ca3-b362-8800ebb8733d.png)

:::note
Website scanning is limited to a crawl depth of 5. This means the crawler will follow links **up to 5 pages deep from your starting URL**. Pages beyond this depth threshold won't be discovered during the scanning.
:::

## In-Context Preview

Preview translations on your website and see how they look [in context](https://crowdin.com/page/in-context-localization). 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:

```html
<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:

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

## Next Steps

1. **Choose [translation strategy](https://support.crowdin.com/translation-strategies/)**
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.

:::note
Certain types of text (e.g., dynamic content, pop-ups, or pages hidden behind an authorization or login screen) cannot be reached by the Server-side crawler. To translate these text elements, you must use the **Client-side** or **Server & Client-side** mode so the app can detect them as users browse the live site and send them to the **Review** tab.
:::