diff --git a/src/content/docs/developer/capabilities/in-context.mdx b/src/content/docs/developer/capabilities/in-context.mdx index aba981e5..01f56b8d 100644 --- a/src/content/docs/developer/capabilities/in-context.mdx +++ b/src/content/docs/developer/capabilities/in-context.mdx @@ -174,6 +174,56 @@ If defined, users can close the In-Context overlay if they don't want to transla Close Login Window +### Start Type + +```js +_jipt.push(['start_type', 'manual']); +``` + +Defines how In-Context is initialized. Acceptable values: + +- **`default`** – In-Context starts automatically after the script loads. +- **`manual`** – In-Context starts only when you call [`window.jipt.start()`](#start-and-stop-methods). + +Use `manual` if you need greater control. For example, in single-page apps where you want to switch In-Context on or off based on user actions. + +## Optional Functions + +You can call various functions on the global `window.jipt` object to manage or customize In-Context in real time. + +### Start and Stop Methods + +```js +window.jipt.start(); +``` + +Manually activates In-Context for the current page. Use this if you set `start_type` to `manual` or if you want to re-activate In-Context after stopping it. + +```js +window.jipt.stop(); +``` + +Stops the In-Context overlay. All interactive translation elements are removed until you call `start()` again. + +**Usage Example: Single-Page Application** + +In a single-page application, you might switch In-Context on or off when a user changes the language: + +```js +const handleLanguageChange = (event) => { + const language = event.target.value; + setSelectedLanguage(language); + + if (language === inContextLanguage) { + window.jipt.start(); + } else { + window.jipt.stop(); + } +}; +``` + +In the above snippet, whenever the user selects the In-Context pseudo-language, In-Context is triggered. When they select any other language, In-Context is stopped. + ## Adding Screenshots via In-Context 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.