Crowdin In-Context tool allows to translate texts directly within the actual web application. In such a way, the best translation quality is maintained.
In-Context localization is tied up with the actual project created in Crowdin, under which translatable files are stored.
This tool makes all the texts in the web app editable. Moreover, the translation process is real-time visible. Even the dynamic part of the application and strings that contain placeholders can be translated this way.
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 for what segment of users it can be activated. The feature that enables the translation mode can be either hidden, There were cases when the translation mode was enabled as an extra language.
Follow step by step the integration setup, which you can find in the Project Settings, In-Context tab.
After the successful integration and your app refreshment, you should see the invitation dialog and Crowdin login box.
You can add these parameters to
_jipt array in the configuration snippet.
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
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
Function to validate the suggestion before committing.
|context||Source string context|
|language_code||Target language code (language codes)|
|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
Function to transform the string before it gets inserted into the DOM.
|text||String 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|
|text||String for insertion|
|false||If the function returns false, DOM will not be updated|
Close the In-Context Overlay Callback
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.