Skip to main content
Website translation

Basic setup

This section covers the basic setup. For more advanced customization options, please refer to the Advanced setup.

Follow Advanced setup guide if:
  • You wish to display languages as buttons
  • You wish to hide language selector or translation notice when translating your website
  • You wish to use a custom language selector
  • Your website is already multilingual
Warning

To set up Tilde Website Translator, you'll need to access your website's frontend source code to insert the Website Translator widget.

Add new website​

To add new website:

  1. Open Tilde Website translator platform.
  2. Click Set up website translator.
  3. Fill the form:
    • Enter the name of your website.
    • Add your website domain.
    • Select your website's original language.
    • Select languages you want your website to be translated into.
  4. Click Create.
  5. Copy the generated integration code and add it to your website.
Adding subdomains

Important: For subdomains, like https://example.com, https://www.example.com and https://sub.example.com , each needs to be added individually to the configuration.

Tip

Add separate website integrations for Test and Production environments to maintain distinct translations.

add new website 1 Create new integration Create new integration2

Try an example​

To create and translate a test page:

  1. Copy the example below.
  2. Replace WebsiteTranslator.Options.api.clientId value from the generated code.
  3. Save the file to your web solution.
  4. Open the example page in your web browser.
/example.html
<html lang="en">
<head>
   <title>My title</title>
   <meta property="og:site_name" content="My site name">
   <meta name="description" content="Some site description.">	
</head>
<body>   
   <div class="website-translator"></div>
   <p>This will be translated</p>   
   <p translate="no">This will not be translated</p>  
   <p lang='ja'>これを訳して</p>
   <p>This text is <b>bold</b></p>
   <p>This is an example with a <a href="">link</a></p>
</body>
<footer>
   <script src="https://unpkg.com/@tilde-nlp/website-translator/dist/widget.js"></script>
   <script>     
      <!-- 👇 Change XXXXXXXXXXX to your Client-ID -->
        WebsiteTranslator.Options.api.clientId = "XXXXXXXXXXXX";
        WebsiteTranslator.Options.api.url = "https://services.tilde.com/service/website-translation";
        WebsiteTranslator.Initialize()
   </script>
</footer>
</html>

Translate the example page​

Select a language from the menu to translate. The translations will gradually replace the the text you see on the screen.

Translated text segments get stored in a database. This means that translating the same page again will be a lot quicker and you can edit translations.

language selector screenshot

translated example screenshot

View the translations in Translation editor​

You can view and edit the translations in the Translation editor.

Open Tilde Website Translator platform, find the website integration and click Translation editor.

Open editor

Translation editor

What's next?​

  1. Include the generated code into your website.
  2. Translate a page.
  3. Read about Translation and editing.