Translations are made directly in the app, with no need to open the Editor. 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 since translators can preview them in a real context.
There are two common approaches to integrate Crowdin In-Context with your application:
Staging or translation environment
If you are not planning to invite your end-users to help with translations or not considering using a “translation mode” in your production application, integrating Crowdin In-Context to your staging or dedicated translation app environment would be a good solution.
Crowdin In-Context doesn’t require any code changes in your application so that you can use it 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:
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 Tools > In-Context.
After the integration is successfully set up and you have refreshed your application, you should see the invitation dialog and Crowdin login box.
When integrating In-Context for your website, you can add an optional script that can collect and add URLs to the context section of each string used on the website.
As a result, translators can click the URL for a particular string and be redirected to the website page where this string is used and get additional context for accurate translation.
To add string URLs to context, follow these steps:
<head> section on every page with localizable text.
When you add a new page to your website, upload the related source files to your Crowdin project. Afterward, repeat the steps above to collect and add URLs for strings from the new page.
If some website page’s URL changes, open it in In-Context to refresh the string URLs collected initially.
You can add these parameters to the
_jipt array in the configuration snippet.
Speeds up dynamic content displaying within the In-Context tool by preloading all source strings. Automatically disabled for large projects (5000+ strings). Acceptable values: true, false.
This option is enabled on touchscreens by default and makes the translation button next to each translatable string permanently visible instead of showing on hover. Acceptable values: true, false.
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|
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. It may be omitted if the text doesn't have a target element (text inside the browser's pop-ups)|
|The attribute of DOM element, if the text is part of an attribute|
|text||String for insertion|
|false||If the function returns false, DOM will not be updated|
If defined, users can close the In-Context overlay if they don’t want to translate. Implement this feature on your side. Depending on the In-Context integration approach, it must change the app’s language or redirect from the translation environment to the production app.
This feature allows you to take a screenshot of the opened website page, upload it to the Crowdin project and automatically tag all strings used on the page.
Read more about Screenshots.