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/

Default page timeout:

In milliseconds. Useful when you have dynamic content on your site (1000 milliseconds = 1 seconds). Default is 0 (no timeout).

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.

Language detect type

You can configure the JS Proxy app to redirect to a respective subdomain or subdirectory when switching the website language.

Subdomains Configurations

When using subdomains for website languages, you need to configure your subdomains to point to the same path as the main website.

Nginx server configuration example: 

server {
  listen 80;
  listen [::]:80;

  root /home/sites/test-site;

  index index.html;

  server_name test-site.com en.test-site.com pl.test-site.com;

  location / {
    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.
    try_files $uri $uri/ =404;
  }
}

Subdirectories Configurations

When using subdirectories for website languages, you need to configure your subdirectories to point to the same path as the main website. It could be achieved with the symlinks for each of the subdirectories.

Sample website configuration:

admin@012345:~/sites/test-site$ ls -all
total 20
drwxrwxr-x 2 admin admin 4096 тра 26 13:40 ./
drwxrwxr-x 3 admin admin 4096 тра 25 21:56 ../
-rwxrwxrwx 1 admin admin  992 тра 26 10:30 index.html*

Symlinks for English(en) and Polish(pl):

admin@012345:~/sites/test-site$ ln -s /home/admin/sites/test-site en
admin@012345:~/sites/test-site$ ln -s /home/admin/sites/test-site pl

As a result, the sample website configuration with symlinks will look like this:

admin@012345:~/sites/test-site$ ls -all
total 20
drwxrwxr-x 2 admin admin 4096 тра 26 13:40 ./
drwxrwxr-x 3 admin admin 4096 тра 25 21:56 ../
lrwxrwxrwx 1 admin admin   30 тра 25 22:00 en -> /home/admin/sites/test-site/
-rwxrwxrwx 1 admin admin  992 тра 26 10:30 index.html*
lrwxrwxrwx 1 admin admin   29 тра 25 22:00 pl -> /home/admin/sites/test-site/
admin@012345:~/sites/test-site$

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>