diff --git a/content/docs/platform/meta.json b/content/docs/platform/meta.json index 02b28454f..455bcaba4 100644 --- a/content/docs/platform/meta.json +++ b/content/docs/platform/meta.json @@ -29,6 +29,7 @@ "workflow/digest", "workflow/step-conditions", "workflow/tags", + "workflow/translations", "---Channels---", "...integrations", "---Account---", diff --git a/content/docs/platform/workflow/build-a-workflow.mdx b/content/docs/platform/workflow/build-a-workflow.mdx index e4d99300c..34c8a9131 100644 --- a/content/docs/platform/workflow/build-a-workflow.mdx +++ b/content/docs/platform/workflow/build-a-workflow.mdx @@ -15,8 +15,9 @@ icon: 'Wrench' - This is also referred to as the workflow `Identifier` - Tags (optional) - Description of the workflow (optional) + - Enable [translations](/platform/workflow/translations) (optional) - Once you've filled in the required fields, click on **Create Workflow**. + Once you've filled in the required fields, click **Create Workflow**. diff --git a/content/docs/platform/workflow/translations.mdx b/content/docs/platform/workflow/translations.mdx new file mode 100644 index 000000000..da11fc48e --- /dev/null +++ b/content/docs/platform/workflow/translations.mdx @@ -0,0 +1,157 @@ +--- +title: 'Translations' +description: 'Learn how to translate your workflow step content into multiple languages' +icon: 'Languages' +--- + +## Workflow translations +Novu supports multi-language translations for workflows, allowing notifications to dynamically adapt to each of your subscriber's preferred language. You can enable, configure, and manage translations across your notification workflows from the Novu dashboard. + + + The translations feature is in `beta` and available on `Team` and `Enterprise` [plans](https://novu.co/pricing). + + +Each workflow can support multiple locales. Novu automatically selects the correct translation based on the subscriber’s locale. + +Benefits: +- Deliver notifications in the subscriber's preferred language +- Customize content per workflow or layout +- Improve communication across geographies + +Manage translations from the [translation page](https://dashboard.novu.co/translations) in the Novu dashboard. Set a default language and add target languages as needed. + +![Translation page](/images/platform/workflow/translations/translations-page.png) + +## Enabling translations + +To use translations for a workflow, you need to enable them on the workflow level. + +### While creating a new workflow + +- Turn on the **Enable Translations** toggle +- Set the default locale, such as `en_US` or `en_GB` +- Add the target locales you wish to support, such as `fr_FR`, `es_ES`, `ja_JP` + +### While editing an existing workflow + +- Open an existing workflow +- Turn on the **Enable Translations** toggle +- You don't need to take any action if the toggle is already on + +You can configure the default and targeted locales on the [translation page](https://dashboard.novu.co/translations). + +![Translation locale](/images/platform/workflow/translations/translations-default-and-target-locale.gif) + +## Translation groups +A translation group contains all language variants for a workflow identified by a unique workflow ID. + +You can: + +- Search for groups on the translations page +- View status per locale ('Outdated' or 'Up to date') +- Import or export translations for a specific locale, such as `en_US` +- Import or export translations for all workflows where translations are enabled + +## Translation JSON format + +Each locale supports JSON-based translation files. For example, the `en_US.json` file contains the default translations for the workflow. You can update the translation JSON files using the JSON editor on the translation page. + +```json +{ + "in-app": { + "title": "Welcome to Novu!", + "message": "Hi {{subscriber.firstName}}, let's get started!" + }, + "email": { + "subject": "Get Started", + "body": "Thank you for joining us, {{subscriber.fullName}}" + } +} +``` + +You can update translations by editing the JSON files in the editor on the translations page or by exporting and re-uploading them. + +![Translation JSON format](/images/platform/workflow/translations/translations_locale_content_edit.gif) + +## Exporting and importing translations + +If you prefer to create/update translations in a JSON file outside the Novu dashboard, you can do so by exporting and importing them. + +### How to import translations + +- Navigate to the translations page. +- Select the workflow you want to export translations for. +- Click on the locale, such as `en_US`, now click on the download icon to download the latest default locale translation JSON file. + +### How to export translations + +- Navigate to the translations page. +- Select the workflow you want to import translations for. +- Click on the locale, such as `en_US`, now click on the **Import Language(s)** button to upload the translation JSON file. +- Novu detects the locale automatically using the file name + +💡 Translation changes in default locale such as `en_US` will mark other locales as *Outdated, needs update* + +### Master JSON file + +Master JSON file is a JSON file that contains the default locale's translations keys of all the workflows where translations are enabled. You can import or export this file from the translations page. Below is an example of a master JSON file: + +```json +{ + "workflows": { + "events-publish": { + "key": "value" + }, + "events-update": { + "subject": "A new update", + "content": "{{payload.eventName}} event has been updated" + } + } +} +``` + +![Master JSON file export and import options](/images/platform/workflow/translations/translations_master_json_file.png) + +## Using translation keys in step content editor + +In Email or In-App editors, use `{{t.key}}` to insert a translatable string. If the key already exists for the locale, it appears in the suggestions list. + +Clicking **Add to Translations** automatically adds a new key to default locale. + +Example: + +```html +{{t.subject}} → "Let's get you started" + +{{t.product.details.description}} +``` + +![Using translation keys in step content editor](/images/platform/workflow/translations/translations_variable_use_in_step_editor.gif) + +## Testing translations + +Use the Preview Context to: + +- Simulate subscriber locale such as `fr_FR` or `ru_RU` +- Preview step content for the selected language. +- Update or correct missing translations on the fly. + +## Keeping translations up to date + +Any edit to the default locale will invalidate others. You’ll see a warning: `Outdated, needs update`. Re-export the default, update translated files, and re-upload. + +## Disabling translations + +A translation group can be disabled by clicking on the three dots and selecting **Disable & delete translations**. This action is irreversible and removes all associated translation data. + +## Translation in email layouts + +This feature is currently a work in progress. If you need translation support in email layouts, reach out to us at support@novu.co + +## Best practices + +- Always finalize your default content before exporting. +- Avoid hardcoded language in the content editor. +- Use variables and translation keys consistently. +- Set subscriber locale properly to deliver notifications in the correct language. + diff --git a/public/images/platform/workflow/translations/translations-default-and-target-locale.gif b/public/images/platform/workflow/translations/translations-default-and-target-locale.gif new file mode 100644 index 000000000..3b5d9121e Binary files /dev/null and b/public/images/platform/workflow/translations/translations-default-and-target-locale.gif differ diff --git a/public/images/platform/workflow/translations/translations-page.png b/public/images/platform/workflow/translations/translations-page.png new file mode 100644 index 000000000..4a1528bb2 Binary files /dev/null and b/public/images/platform/workflow/translations/translations-page.png differ diff --git a/public/images/platform/workflow/translations/translations_locale_content_edit.gif b/public/images/platform/workflow/translations/translations_locale_content_edit.gif new file mode 100644 index 000000000..3090348bf Binary files /dev/null and b/public/images/platform/workflow/translations/translations_locale_content_edit.gif differ diff --git a/public/images/platform/workflow/translations/translations_master_json_file.png b/public/images/platform/workflow/translations/translations_master_json_file.png new file mode 100644 index 000000000..e0aea193d Binary files /dev/null and b/public/images/platform/workflow/translations/translations_master_json_file.png differ diff --git a/public/images/platform/workflow/translations/translations_variable_use_in_step_editor.gif b/public/images/platform/workflow/translations/translations_variable_use_in_step_editor.gif new file mode 100644 index 000000000..406566bb1 Binary files /dev/null and b/public/images/platform/workflow/translations/translations_variable_use_in_step_editor.gif differ