JS Proxy Integration

Synchronize all source files with your project and send new translations from project to your website immediately.

Import/Update Source Texts

https://
This app will crawl your website and extract all translatable texts. In your project you will find a new file with texts for translation.
Useful when you are testing the technology. Website crawling takes time. Set the limit of how many pages you want to translate. Default is 10000.
Add exclude paths You can specify which paths to crawl. If not specified, all pages will be imported. You can use wildcard symbols such as * or ** or exclude paths with ! at the beginning of path.

Include paths examples:

/about - Will match exact page /about

/page/** - Will match all pages starting with /page/

/article/* - Will match all pages with one level above /article/, for example /article/1/2 will not be matched as it has more than one level

/**/comments - Will match all pages that end with /comments

Exclude paths examples:

/page/** - Will exclude all pages starting with /page/

Language detect type:

Example: test-site.com?lng=en
Your system administrator needs to configure additional subdomain settings. E.g., if the main site is test-site.com, the subdomain should be en.test-site.com and refer to the same content as the main site.
Your system administrator needs to configure additional subdirectory settings. E.g., if the main site is test-site.com, the subdirectory should be test-site.com/en and refer to the same content as the main site.

Hiding translation swapping on page load:

After adding the JavaScript snippet, make sure to add the “js-proxy-blur” class in the <body> tag:
<body class="js-proxy-blur">

Publish Translations

Latest translations will be available for over-the-air delivery for your website

For In Context Preview you need to add Pseudo Language 

Integrate Language Switcher

Just add a JavaScript snippet like you do with Google Analytics. This will let your visitors see the language switcher.

Please import your site and publish translations first.

What is JS Proxy?

JS Proxy – is a technology aimed at helping teams localize websites that don’t support localization from the start or require manual content updates. With JS Proxy you can localize static content, knowledge bases, landing pages, status pages, and more. No need to manually export source content or copy-paste translations.

How does it work?

  1. Import texts from your website.
    At this step you don’t have to make any changes to your website. JS Proxy will crawl your website and extract all of the translatable texts. In your Crowdin project you will find a new file with every text for translation.
  2. Translate your content.
    In your project, you will find a new file with texts for translation.
  3. Publish translations.
    Add the automatically created JavaScript snippet to your website. This snippet can be inserted at the header of your website. Some services and website builders suggest a separate place to work with the code. For example, WordPress has the Header and Footer Scripts plugin, Webflow – Custom Code option.

How to set up the JS Proxy integration?

  1. Enter your website’s URL and click Import Now. Website content will be scanned and automatically added as a .json file to the Files section.
  2. Choose your translation strategy and translate your website
  3. Add a language switcher to your website by inserting the JavaScript snippet displayed on the app configuration page inside the <head> tag of a page or before the </body> tag.
  4. Use the Import section of this plugin every time new content on your website needs to be translated.
  5. Click Publish Now to publish new translations.

In-Context Preview

  1. Enable In-Context for your project. Go to Tools > In-Context and click Enable In-Context for web.
  2. Add Pseudo Language for In-Context: Tools > In-Context > Integrate a 'new' language - Please use a language with codes than do not match with the project languages codes.

Language switcher customization

To customize the language switcher, set the following parameters:
    • position:
    • 'bottom-right' | 'top-right' | 'bottom-left' | 'top-left' (for sticky position)
    • 'inline' | 'left' | 'right' (for inline position)
  • submenuPosition: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'
  • class: 'some-value-for-your-custom-class'
  <script>
    window.proxyTranslator.init({
      distributionBaseUrl: "https://production-project-distribution.s3.eu-central-1.amazonaws.com",
      filePath: "/example.com.json",
      distribution: "e-65caabe61ca575d56e7d161a",
      languages: {"uk":"Ukrainian"},
      defaultLanguage: "en",
      defaultLanguageTitle: "English",
      poweredBy: true,
      position: "top-right",
      submenuPosition: "bottom-right",
      class: "some-value-for-your-custom-class",
    });
  </script>