Im-Kontext-Übersetzung für Web-Anwendungen

Crowdin In-Context tool allows to translate texts directly within the actual web application. In such a way, the best translation quality is maintained.

Die In-Context-Lokalisierung ist mit dem in Crowdin erstellten Projekt verknüpft, unter dem übersetzbare Dateien gespeichert werden.

Dieses Tool ermöglicht es, alle Texte in der Webapplikation editierbar zu halten. Außerdem ist der Übersetzungsprozess in Echtzeit sichtbar. Selbst der dynamische Teil der Anwendung und Zeichenketten, die Platzhalter enthalten, können auf diese Weise übersetzt werden.

Technischer Überblick

Crowdin In-Context works with the help of one line Javascript snippet and the pseudo-language package. It creates the pseudo-language package based on the localization files uploaded to your project, which later will be integrated to your application as an extra-localization language.

Integrated pseudo-language contains some special identifiers instead of the original texts, thus when switching your app to that language, all of the labels are converted to the special identifiers. Javascript searches for those identifiers and replaces them with the editable labels. In such a way, the translator does not see any difference between the live app and the app with the integrated Crowdin In-Context tool. However, the tool defines what part of the app is translatable and provides all means to let the translator localize in context.

The translation is made on the minimized regular Crowdin Editor with all the functionalities (TM, machine translation, approve/vote option, comments, terms) provided. Thus, it is easier to review the translations for the proofreaders and assure the quality.


There are two common approaches to integrate Crowdin In-Context with your application:

  • Staging or translation environment. If you are neither intended to invite your end-users to help with the translations nor consider using a “translation mode” in your production application, integrating Crowdin In-Context to your staging or dedicated translation app environment is a good solution.
  • Production environment. Crowdin In-Context does not require any code changes in your application, so it can be used even on production. You decide how to turn it on and which segment of users will use it. The most common use cases are the following:
    • you can create a mirror website, that is a complete copy of your application, but under a different URL (for example, instead of it can be, where translators will make translations like if it was your real application.
    • you can also add In-context as an extra language. So, when translators open your application they will be able to select one extra language from the list, which will open In-context for them.

Follow the integration setup guide in your Crowdin project to set up In-context. To check out the guide, open your project and go to Integrations > In-Context.

After the successful integration and your app refreshment, you should see the invitation dialog and Crowdin login box.

Optionale Parameter

You can add these parameters to _jipt array in the configuration snippet.

Texts Preloading

_jipt.push(['preload_texts', true]);

Speeds up dynamic content displaying within the In-Context tool by preloading all source strings. Automatically disabled for the large projects (5000+ strings). Acceptable values: true, false.

Translation Button Always Visible

_jipt.push(['touch_optimized', true]);

This option is enabled on touchscreens by default and makes the translation button next to each translatable string permanently visible, as opposed to showing on hover. Acceptable values: true, false.

Before Commit Callback

_jipt.push(['before_commit', function(source, translation, context, language_code) { return status_obj; }]);

Function to validate the suggestion before committing.

language_codeZielsprachencodes (Sprachcodes)
status_obj Object. The status_obj.status may be "ok", "error" or "corrected". In case of error, status_obj.message contains error description. When status is "corrected", status_obj.correction contains the corrected translation

Before DOM Insert Callback

_jipt.push(['before_dom_insert', function(text, node, attribute) { return 'text'; }]);

Function to transform the string before it gets inserted into the DOM.

textString for insertion
DOM element in which the text must be inserted. May be omitted if text does not have target element (text inside browser's pop-ups)
Attribute of DOM element, if the text is part of attribute
textString for insertion
falseIf the function returns false, DOM will not be updated

Close the In-Context Overlay Callback

_jipt.push(['escape', function() { window.location.href = ""; }]);

If defined, users can close In-Context overlay if they don’t want to translate. Implement this feature on your side. It must change app’s language or redirect from translation environment to the production app, depending on the In-Context integration approach.

War dieser Artikel hilfreich?