Embed file context: Add additional context directly in the editor

There's a popular Embed Iframe application that allows you to embed your URL directly into the translation editor with useful tool or information for your translators. We've seen this tool often used to provide additional context to translators or to embed tools such as external terminology sites.

But what if you need to provide contextual information on a per-file basis? Well, that is what this application does. After installing the app (be sure to carefully select the projects where this app will be useful), you will find a new tab in your project's Tools section, where you will be able to see a list of your Crowdin projects and the possibility to specify an embed code (a valid HTML code) or just a URL that should be displayed to translators when they work on this file.

Advanced use

This application allows you to provide context for any file, or provide code that finds preview information at runtime.

Below is a sample code that looks through the Crowdin file's Context field to find preview URLs. The Context field itself is automatically populated by the Sentry integration.

The Context field format expected by this code is as follows

Preview link - EN-GB

https://crowdin-web-components.s3.amazonaws.com/index.html

--------------------

Preview link - DE

https://crowdin-web-components.s3.amazonaws.com/index.html

--------------------

Preview link - FR

https://crowdin-web-components.s3.amazonaws.com/index.html

(language codes should match the Crowdin language codes for this code to work)

(function () {
  const parseUrlsAndLanguageCodes = (input) => {
    const regex = /Preview link - ([A-Z\-]+)\n\n(http[^\s]+)/g;
    let match;
    const result = [];

    while ((match = regex.exec(input)) !== null) {
      const languageCode = match[1];
      const url = match[2];
      result.push({ languageCode, url });
    }

    return result;
  };

  const parsedData = parseUrlsAndLanguageCodes(env.file.context);
  if (parsedData?.length) {
    return parsedData.find(l => l.languageCode.toLowerCase() == 'de').url;
  } else {
    return null;
  }
})();

The code will be executed in an sandboxed environment and will be provided with theenv data as following:

{
    "file": {
        "id": 18417,
        "projectId": 549,
        "branchId": null,
        "directoryId": null,
        "name": "crowdin_sample_webpage.html",
        "title": "super-super",
        "context": "Preview link - EN-GB\n\nhttps://crowdin-web-components.s3.amazonaws.com/index.html\n\n--------------------\n\nPreview link - DE\n\nhttps://crowdin-web-components.s3.amazonaws.com/index.html\n\n--------------------\n\nPreview link - FR\n\nhttps://crowdin-web-components.s3.amazonaws.com/index.html",
        "type": "html",
        "path": "/crowdin_sample_webpage.html",
        "status": "active",
        "revisionId": 1,
        "priority": "normal",
        "importOptions": {
            "contentSegmentation": true,
            "customSegmentation": false,
            "excludedElements": [],
            "inlineTags": []
        },
        "exportOptions": null,
        "excludedTargetLanguages": null,
        "parserVersion": 27,
        "createdAt": "2024-08-06T10:55:40+00:00",
        "updatedAt": "2024-08-09T12:13:41+00:00",
        "fields": []
    },
    "project": {
        "clientOrganizationId": null,
        "translateDuplicates": 0,
        "tagsDetection": 0,
        "glossaryAccess": false,
        "isMtAllowed": true,
        "taskBasedAccessControl": false,
        "hiddenStringsProofreadersAccess": true,
        "autoSubstitution": true,
        "showTmSuggestionsDialects": true,
        "exportTranslatedOnly": false,
        "skipUntranslatedStrings": false,
        "exportWithMinApprovalsCount": 0,
        "exportStringsThatPassedWorkflow": false,
        "autoTranslateDialects": false,
        "normalizePlaceholder": false,
        "isSuspended": false,
        "qaCheckIsActive": true,
        "qaApprovalsCount": 1,
        "qaCheckCategories": {
            "empty": true,
            "size": true,
            "tags": true,
            "spaces": true,
            "variables": true,
            "punctuation": true,
            "symbolRegister": true,
            "specialSymbols": true,
            "wrongTranslation": true,
            "spellcheck": true,
            "icu": true,
            "terms": false,
            "duplicate": true,
            "ftl": true,
            "android": true
        },
        "qaChecksIgnorableCategories": {
            "empty": true,
            "size": false,
            "tags": true,
            "spaces": true,
            "variables": true,
            "punctuation": true,
            "symbolRegister": true,
            "specialSymbols": true,
            "wrongTranslation": true,
            "spellcheck": true,
            "icu": false,
            "terms": true,
            "duplicate": false,
            "ftl": false,
            "android": false
        },
        "customQaCheckIds": [],
        "externalQaCheckIds": [],
        "languageMapping": {},
        "delayedWorkflowStart": false,
        "notificationSettings": {
            "translatorNewStrings": false,
            "managerNewStrings": false,
            "managerLanguageCompleted": false
        },
        "defaultTmId": 535,
        "defaultGlossaryId": 531,
        "assignedTms": {
            "535": {
                "priority": 1
            }
        },
        "assignedGlossaries": [
            531
        ],
        "tmPenalties": [],
        "assistActionAiPromptId": 27,
        "id": 549,
        "groupId": 2,
        "type": 0,
        "userId": 2,
        "sourceLanguageId": "en",
        "targetLanguageIds": [
            "fr",
            "de"
        ],
        "name": "test-workflows",
        "identifier": "8e2fa3f27737145581b923cac3427dcf",
        "description": "",
        "logo": "data:image/png;base64,i.....",
        "background": null,
        "isExternal": false,
        "externalType": null,
        "workflowId": 269,
        "hasCrowdsourcing": true,
        "publicDownloads": true,
        "createdAt": "2024-08-06T10:35:24+00:00",
        "updatedAt": "2024-08-06T10:35:24+00:00",
        "lastActivity": "2024-08-09T12:13:41+00:00",
        "sourceLanguage": {
            "id": "en",
            "name": "English",
            "editorCode": "en",
            "twoLettersCode": "en",
            "threeLettersCode": "eng",
            "locale": "en-US",
            "androidCode": "en-rUS",
            "osxCode": "en.lproj",
            "osxLocale": "en",
            "pluralCategoryNames": [
                "one",
                "other"
            ],
            "pluralRules": "(n != 1)",
            "pluralExamples": [
                "1",
                "0, 2-999; 1.2, 2.07..."
            ],
            "textDirection": "ltr",
            "dialectOf": null
        },
        "targetLanguages": [
            {
                "id": "fr",
                "name": "French",
                "editorCode": "fr",
                "twoLettersCode": "fr",
                "threeLettersCode": "fra",
                "locale": "fr-FR",
                "androidCode": "fr-rFR",
                "osxCode": "fr.lproj",
                "osxLocale": "fr",
                "pluralCategoryNames": [
                    "one",
                    "other"
                ],
                "pluralRules": "(n > 1)",
                "pluralExamples": [
                    "0, 1",
                    "2-999; 1.2, 2.07..."
                ],
                "textDirection": "ltr",
                "dialectOf": null
            },
            {
                "id": "de",
                "name": "German",
                "editorCode": "de",
                "twoLettersCode": "de",
                "threeLettersCode": "deu",
                "locale": "de-DE",
                "androidCode": "de-rDE",
                "osxCode": "de.lproj",
                "osxLocale": "de",
                "pluralCategoryNames": [
                    "one",
                    "other"
                ],
                "pluralRules": "(n != 1)",
                "pluralExamples": [
                    "1",
                    "0, 2-999; 1.2, 2.07..."
                ],
                "textDirection": "ltr",
                "dialectOf": null
            }
        ],
        "webUrl": "https://serhiy.crowdin.com/u/projects/549",
        "publicUrl": "https://serhiy.crowdin.com/test-workflows",
        "savingsReportSettingsTemplateId": null,
        "fields": {
            "delete-empty-glossary": true,
            "delete-empty-tm": true
        },
        "saveMetaInfoInSource": true,
        "skipUntranslatedFiles": false,
        "inContext": false,
        "inContextProcessHiddenStrings": true,
        "inContextPseudoLanguageId": null,
        "inContextPseudoLanguage": null,
        "tmContextType": "segmentContext"
    },
    "context": {
        "project_id": "549",
        "organization_id": "200000009",
        "editor": {
            "mode": "translate",
            "theme": "light",
            "source_language_id": "en",
            "target_language_id": "de",
            "file": 18417,
            "workflow_step": {
                "id": 2901,
                "title": "Translation by Vendor",
                "type": "TranslateByVendor"
            }
        }
    }
}

Screenshots