Crowdin In-Context works with the help of a one-line Javascript snippet and pseudo-language package. It creates a pseudo-language package based on the localization files uploaded to your project, which later will be integrated into 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 editable labels. So, the In-context page of your web app will look the same as your application, with the only difference that translatable strings will be editable.
Translations are made directly in the app, with no need to open the Editor. As a simplified version of Crowdin Editor will be displayed, with all the functionality (TM, machine translation, approve/vote option, comments, terms) provided. Thus, it’s easier to make and review translations, as that can be previewed in a real context.
There are two common approaches to integrate Crowdin In-Context with your application:
Follow the integration setup guide in your Crowdin project to set up In-context. The guide can be found in the left-hand panel in your project, under Resources > Integrations & API.
After the integration is successfully set up and you refreshed your application, you should be able to see the invitation dialog and Crowdin login box.
You can add these parameters to _jipt
array in the configuration snippet.
_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.
_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.
_jipt.push(['before_commit', function(source, translation, context, language_code) {
return status_obj;
}]);
Function to validate the suggestion before committing.
Parameters | |
source | Source text |
translation | Translation text |
context | Source string context |
language_code | Target language code (language codes) |
Return Values | |
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 |
_jipt.push(['before_dom_insert', function(text, node, attribute) {
return 'text';
}]);
Function to transform the string before it gets inserted into the DOM.
Parameters | |
text | String for insertion |
node optional | DOM element in which the text must be inserted. May be omitted if the text does not have a target element (text inside the browser's pop-ups) |
attribute optional | The attribute of DOM element, if the text is part of an attribute |
Return Values | |
text | String for insertion |
false | If the function returns false, DOM will not be updated |
_jipt.push(['escape', function() {
window.location.href = "http://app_domain.com";
}]);
If defined, users can close In-Context overlay if they don’t want to translate. Implement this feature on your side. It must change the app’s language or redirect from translation environment to the production app, depending on the In-Context integration approach.