Automating Website Localization with Crowdin's Website Translator

Localizing websites is a great way to appeal to millions of potential customers around the world. What if we say that website translation does not require busy engineers’ involvement and a tedious preparation process? And no, we won’t tell you how to enable the Google Translate add-on in your browser and translate a webpage with it as a user. Why? Simply because it is leading to a bad user experience, and what’s more, such “localization” can often hinder and confuse your potential customers.

Don’t risk losing a potential client, especially since the website translation is simple with Crowdin. This guide will walk you through the steps to automate your website localization using Crowdin’s powerful Website Translator integration. This new tool works by crawling your live website for translatable content and syncing it with your project, eliminating the need for manual work.

Website Localization Has Never Been Easier

Unlike other methods of making your website multilingual, website translation with Crowdin requires little to no help from developers. Nor special preparations on the side of your content management system (CMS) and application.

• Automatic content sync: The app automatically detects, extracts, and syncs your website content, so your translations are always up-to-date.

• Translate more than content: Translate your meta titles and descriptions for true SEO-friendliness. Support higher rankings in local search results.

• AI translations: Configure DeepL integration to get fast and high-quality translations for new content the moment it’s detected.

• High accuracy: Use In-Context Previews to see exactly how translations will look on your live website before you publish.

• Full content control: Use advanced CSS selectors and path filters to gain control over which content gets translated and which gets ignored.

• Set it and forget it: Fully automate your workflow with schedules for syncing new source content and publishing the translations.

Introducing the Website Translator

Imagine a one central place for your entire website localization workflow. That’s the Crowdin Website Translator. It’s a powerful integration designed to completely eliminate the manual tasks that used to make website localization a challenge.

Automatic Scanning and Syncing

Website Translator works by intelligently crawling your live website, like a search engine. It automatically detects all translatable text (from headlines and buttons to paragraphs and meta descriptions). And then syncs the strings directly with your Crowdin project. When new content appears on your site, the app finds it. When you update existing text, the app detects it. No more manual file exports and copy-pasting.

Designed for Any Tech Stack

Because the Website Translator interacts with your live website, it’s compatible with a huge range of frameworks and content management systems. Whether your site is built on Webflow, Squarespace, Framer, or a custom framework, the app can handle it without requiring any changes to your site’s code or backend. It’s a true solution.

Before You Start: A Quick Note on International SEO

Once you’ve chosen your target markets, the next crucial step is ensuring customers in those regions can find you. International Search Engine Optimization (SEO) is the key to generating organic traffic, but it’s more than just direct translation. It involves local keyword research, optimizing page elements like titles and URLs, and understanding cultural search habits.

We’ve created a comprehensive guide that covers this topic in detail. Before you proceed, we highly recommend reading our guide to Multilingual SEO.

How to Set Up the Website Translator in 5 Steps

Localization automation is a simple process. Here is how you get the Website Translator do its best job.

Step 1: Configure Your Website and Preferences

First, install the Website Translator app from the Crowdin Marketplace. When done, you’ll configure the basic settings, including your website’s URL. This is also where you will choose your Application Mode to control how the app finds new content:

• Server-side: Crowdin’s servers crawl your website on a schedule to find new text. Best for most websites.
• Client-side: New, untranslated text is detected and sent to Crowdin when visitors browse your live site. Ideal for dynamic content.
• Server & Client-side: A hybrid approach. It combines both methods for the best results.

Step 2: Scan Your Website and Import Content

Once configured, the app will scan (or in other words “crawl”) your website to find all translatable pages and text. In the app’s URLs Management tab, you can view all found pages, re-import them to fetch new content, or remove pages you don’t want to translate. After the scan, your website content is imported into your Crowdin project as translation files.

Step 3: Translate Your Content in Crowdin

With your content in the Crowdin project, you can use your preferred translation method - invite your in-house team, order professional translations, or use Machine Translation or AI Translation workflow with human review. Be sure to use the In-Context Preview feature. As this feature allows translators to work directly on a live preview of your site for the highest accuracy.

Step 4: Publish Translations

After translations are done and approved in Crowdin, you can go and publish them. To fully automate your workflow, you can set a Publishing Schedule (e.g., hourly or daily). This will ensure your site is always up-to-date with the latest translations without any manual clicks. We call it continuous localization.

Step 5: Add the Code Snippet to Your Site

Here we add the language switcher for your visitors. Add the automatically generated JavaScript snippet from the app to your website’s header. It’s no more complicated than adding a Google Analytics script.

You’ll also need to add the js-proxy-blur class to your <body> tag to ensure a smooth, flicker-free loading experience for users: <body class="js-proxy-blur">

Once the snippet is live, a language switcher will appear, and your newly localized content will be delivered to your visitors!

Platform and CMS Compatibility

The Website Translator is designed to be the ultimate tool. It works with a wide range of website builders and content management systems:

Drupal

WooCommerce

Storyblok

Instapage

Squarespace

Ghost.org

Unbounce

Leadpages

Pagewiz

Webflow

Wix

Lander

Salesforce Experience Builder

Weebly

WordPress Multilingual Plugin

Test Localization before Launching your Multilingual Website

Everybody wants to bring their creation to market as quickly as possible – but you need to remember how crucial it is to strike a balance between speed and quality. Pay attention to the testing process. Before any new website is launched, you must conduct a test to ensure a great user experience across all markets.

Take your time, test early and often, and check the following:

• Names, time, date, and weight formats.
• Special characters, hyperlinks and hotkeys functionality.
• Validation message for input fields.
• Broken strings/design.
• Load time.
• Spelling errors and punctuation errors.
• Grammatical mistakes.
• Cultural aspects of translation.
• Misuse of keywords.
• Readability and appeal of the message.
• Untranslated strings.

Remember that the major area affected by localization testing includes content and UI. Test your website a few times, and don’t forget to try out different devices and browsers.

Get Started with Localization of Your Website

Now you know how to make your website available in different languages to reach a broader audience. Go ahead to set up the app in your Crowdin or Crowdin Enterprise account in minutes. You can also request a demo to observe this add-on in action and discuss it with our team.