
Texts for app stores	Create a single associated text and edit it whenever you need to update it.	Proofreaders will get a notification that text is updated.
"What's new"	Create a new associated text for each of your updates. Older updates may be deleted or stored.	Proofreaders will get a notification about a new text to check.
Changelogs	Create a new small associated text for each record in your changelog.	Proofreaders will read each new record separately. This saves the time and wallet.

Your rank: General ``` This will create two different scopes for "General" string, and allow it to be localised properly. You and your team members (including proofreaders) will clearly see the scope in source strings list. ### Scope size You can set scope directly on a source string: ```html General ``` or some container element: ```html

``` or even on a whole page: ```html ``` ### Nesting and default scope Scopes do not stack. Each nested scope cancels the outer scope and creates its own scope. You can reset any item to default ("*none"*) scope by specifying an empty attribute. You may need it for strings which meaning is generic: ```html

...

``` ### Recommendation It is not recommended to create an own scope for each and every page. Average project has much more generic terms and strings. But if you face a problem with an ambiguous localisation, you can add a scope at any time. # Performance * BabelShark relies on hash calculation. To archive the best performance possible we use high-performance WASM code, such as # FAQ ## Language selection widget

How to adjust a pop-up widget position or style?

Language widget can be adjusted using `data-` attributes. [Read more here](/dev/api-reference/language-drop-down-specs).

# Introduction BabelShark has been developed to be handy for projects managed by a team or by a single person (who acts as an owner and developer). ## Single person usage Access all features from within BabelShark account: * create a project in BabelShark account, set the languages you want to translate to, * get a [HTML snippet code](/dev/embed-babelshark-script) and put on your website, * check (proofread) [translations](/proofreader/how-to-proofread) if necessary. ## Team usage Add people to your team in BabelShark. There are sevaral roles available: * **owner** - the person who has created the project. Has access to all features, including [team assignments](/owner/working-in-a-team) and payment plan control, * **manager(s)** [able to edit project details](/manager/introduction), add/remove proofreaders to the team, control team performance, * **developer(s)** able to get [a HTML code snippet](/dev/embed-babelshark-script) for the project, * **proofreader(s)** has [access to translations](/proofreader/how-to-proofread) to a specific language (or a subset of languages) to proofread and fix translations. {% hint style="info" %} The more granular access control is available on a Pro payment plan. {% endhint %} # Real-time language statistics BabelShark's **Visitor Language Statistics** feature helps website owners understand which languages their visitors use. By tracking browser language settings, this feature provides clear insights into which languages are most relevant for localization. Instead of making assumptions, you can rely on real visitor data to optimize your site's language offerings. ## Language Statistics Page **Language Statistics** section in your BabelShark account includes detailed visitor language insights.

This page displays real-time statistics, allowing you to see which languages are most commonly used by your audience. This enables continuous monitoring and refinement of your localization strategy based on actual user behavior. ### Getting Started To start gathering visitor language statistics: 1. Sign up for a BabelShark account (if you haven’t already). 2. [Install the lightweight code](/dev/embed-babelshark-script) on your website. 3. Visit your BabelShark account to view language insights and make informed localization decisions. **Leverage visitor data to enhance your website's accessibility and engagement with BabelShark!** # Working in a team Team roles available: * Project owner * Project manager(s) * Proofreader(s) # Embed BabelShark script BabelShark requires a "code snippet", a single .js script to be embedded into your page:

Add this code to your HTML, to <head> preferably

Read more about configuration object at [API Reference page](/dev/api-reference/babelshark-config). ### Language dropdown You probably also want a language-selection dropdown somewhere on the page (you can use API to switch languages but built-in dropdown is a good start):

This snippet should be added exactly where you want a language dropdown to reside. BabelShark.js will turn this snippet to a language flag button and a dropdown:

Read about language widget configuration in [API Reference](/dev/api-reference/language-drop-down-specs). # API Reference BabelShark API reference includes: * `babelShark` initialization reference * `babelShark` JavaScript object runtime API * [language drop-down reference](/dev/api-reference/language-drop-down-specs) # BabelShark config `babelSharkConfig` global variable is being used by BabelShark embed script to configure the behavior of the translation engine. This object has to be set before loading babelshark.js script. The minimal configuration is the following: ```javascript ... ``` ### Configuration options The complete TypeScript interface for configuration object is: ```typescript interface BabelSharkConfig { // Project ID projectId: number; // _Public_ access code for the embedded script accessCode: string; // Optional flag to detect language automatically using navigator.language detectLanguage?: boolean; // Optional flag to pick language from query string parameter detectFromQueryString?: string; // Callback to be called when BabelShark is initialized onLoaded?: (instance: BabelShark) => void; // The instance of BabelShark currently running (set on script load) instance?: BabelShark; } ``` # Language drop-down specs To embed an automatic language drop-down to your page use the following HTML element: ```html ``` The minimal code snippet is ``. ### Configuration attributes

class

"bs-activator" To adjust the language selector button, use this class in your css.

data-drop

The direction to open the language drop-down: * auto - automatically select the direction * right - drop down to the right and below the language selector * left - drop down to the left and below * right-top - open to the right and over the language selector * left-top - open to the left and over the language selector

data-theme

Overall coloring theme of the widget and its activator: * light (default) - light background, dark text * dark - dark background, light text

data-css

Embed the speficic CSS file in to the drop-down iframe.

data-dialog-style

CSS inline styles for widget dialog (iframe). Useful to set `z-index` and similar properties. Note: `data-drop` attribute controls widget position.

# HTML markup Specify source strings and control translation with BabelShark markup. ## Class markup * `__`\ Identifies element and its child tree to be translated * `__bs-ignore`\ Exclude element and its subtree from translation * `__var`\ Mark string part as non-translatable variable. [Read more about variables](/dev/html-markup/variables). # Variables It is often desirable to translate string with a variable value inside, like: ```html

Today is July 8th.

``` or ```html

Deleting 80 of 200

``` Obviously, you can not mark the whole HTML element (\

) with `__` class because it will generate infinite amount of source strings (for every date or every number used). ## Use variables Mark variable value of the string with `__var` class: ```html

Deleting 80 of 200

``` This will exclude variable values from the source string. They will be replaced by `{{VAR#}}` value in a source string:

# Issues Something wrong may appear in the page markup. BabelShark will try to indicate the problems. ### Nested \_\_ class One of the most often issues is a presence of nested elements with `__`class: ```html

Some content is here

``` You may see that inner `__` is located within outer `__` element. This will cause issues while localizing strings. BabelShark indicates the problem in translations list:

To fix this issue, edit your HTML and avoid nested elements with `__` class. # Integrations BabelShark provides built-in integrations with the following frameworks and CMS: * Tilda ([tilda.cc](https://tilda.cc)) - view Tilda integration docs * Wix * Webflow ### Scaffold frameworks For most of scaffold frameworks (React, MeteorJS, Angular), [HTML markup](/dev/html-markup) is a convenient way to enable localization with BabelShark. # Tilda Publishing BabelShark provides out-of-box localization of Tilda websites. # Tilda website setup Integrating BabelShark with Tilda Publishing website is very straightforward and easy: 1. Open your BabelShark project dashboard 2. Scroll for "Code snippet":

3. Copy code and paste it to "Site settings" of your Tilda website:

# Elements to localize By default, BabelShark localizes all Tilda blocks available on the page. This can be undesirable so there are two options to control blocks localization: ### Exclude specific blocks Add `uc-bshark-ignore` CSS class to the block: Block settings -> CSS Class Name ### Localize specific blocks only 1. First, disable localization for whole page first: open page settings -> Head HTML code -> Add\ `` 2. Then add `uc-bshark-translate`CSS class for blocks to translate. # Introduction Project managers have almost as much power as the project owner. The main duties of a project manager are: * Manage localisation team (add/remove proofreaders) * Manage project localisation languages * Check project progress * Clarify project localisation details (source string meanins, locations) # Community proofreaders Your team might not have native speakers for all languages. BabelShark has a community of proofreaders who can join your project and proofread your translated strings. To order community proofreading, go to the "Team" section of your project and select the desired languages:

## Pricing The proofreading price is 150 translation points per 1,000 source characters. This equals USD 1.5. "Source characters" means you pay based on the length of your original strings. Translations to different languages may be shorter or longer, but the price remains the same: "click here" - 10 characters\ Proofreading of any language, like "klicken Sie hier" (German - 16 characters), still gets paid for 10 characters. Other details: * you pay **once** for each source string proofreading.\ Even if proofreader edits a translation, you pay for the first proofreading only. * you get a particular proofreader assigned to your project.\ Staying in context is important for localization. ## Wallet balance To pay for proofreading, fund your BabelShark account wallet. The wallet holds "translation points" that you can spend on proofreading your source strings. ## # Introduction The main tasks for a proofreader team member: * verify translations to a specific language * confirm suitable automatic translations * manually fix misleading translations * periodically check the project for new translations ## Getting invited Once assigned to the Babelshark Project, you will be invited to team as **Proofreader** with your assigned language. However, before you start translating, you're required to setup your account: 1. Login to your [Babelshark account](https://babelshark.net/signin) 2. Look for invitation under **Notifications** 3. Accept the invitation Once assigned in the Team, your **Dashboard** should look as following:

To get acquainted with more mechanics, read more on [How to translate](/proofreader/how-to-proofread) # How to proofread Summarized explanation of guidelines working as a Proofreader After finalizing the steps described in [Introduction](/proofreader/introduction) you are ready to start proofreading the project to your assigned language. Navigate over to **Translations** page in the left-side menu

You will end up on the page where all the **Translation strings** are located. Click **Translate now** to automatically translate the string. (Read about [Translation types](/proofreader/translation-types))

#### If automatic translation is OK: When clicking **Translate now** - Babelshark will automatically attempt translation. Proofreader should be able to determine if automated translation is okay.

#### If automatic translation doesn't quite fit... Babelshark's automatic translation does not guarantee 100% accuracy in translations. In case the translation seems off to you: 1. Click on the translated text 2. Enter translation manually 3. Hit **Save**

#### Some strings are unnecessary to translate Sometimes, Babelshark pulls variable strings from projects which are unnecessary to translate. The translation won’t take effect as these type of strings constantly change.
Example of variable strings:

another example:

#### Sometimes, strings to translate can confuse As a Proofreader, you may come across with translation strings that are confusing, words and phrases that have different meanings in different contexts. Read more on [Checking translations ](/proofreader/checking-translations)to understand how to translate confusing strings effectively # Checking translations To ensure Proofreader's translations are accurate As a Proofreader, you will have to check the translated strings thoroughly and in the context of the project. Overtime, various projects and products adapt their own terminology, which Proofreader may understand as words of different meaning. BabelShark has several functions to help Proofreaders **understand** what they're translating, into what context. ### Context hints On the bottom left-side of the string, there is a context hint that helps better understand the context of your translation.

If there's no context hint: 1. Copy the **String ID** (You can use this for searching strings as well)

2. Paste it to your Project Manager (The person which invited you to project, or any relevant team member) 3. Wait for Project Manager to provide context on your string ### Drawer menus ![](https://1290550914-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUf86Tx3GrUXukSHhL9ht%2Fuploads%2FDuBGAvxPg1dHvdZydnax%2Fimage.png?alt=media\&token=4c690e78-7c06-42ef-aa23-e7d6f0089eb1) Every string includes a ![](https://1290550914-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUf86Tx3GrUXukSHhL9ht%2Fuploads%2Fnu1C1F0IW8N5ACttzjFU%2Fimage.png?alt=media\&token=6630a167-7737-4e98-a7fe-7f8cc7e5332e)**Drawer arrow icon** on the right-side, once clicked, it provides more information on the string: * When it was added * Last use of the string * Original language * URL of the page (Where it's located) * Original string Overtime, more helpful functions will be added for Proofreaders to better understand concept of every translation string. To finalize your knowledgebase of how to work with Babelshark as Proofreader, continue reading [Translation types](/proofreader/translation-types) # Translation types Understand the difference of translation string types On Babelshark, every displayed string is a task to translate for Proofreader. There are several translation string types, that act as statuses: * N/A - When no translation has been provided to the string in the designated language

* Automatic new - New automatic translation, unconfirmed by Proofreader

* Automatic confirmed - Confirmed automatic translation via ![](https://1290550914-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUf86Tx3GrUXukSHhL9ht%2Fuploads%2FZyWHfg7PVcPJp3uOC2bK%2Fimage.png?alt=media\&token=c84bc0d7-95d6-470b-b49a-c8e24cdd0ca5) checkmark (Done by proofreaders)

* Manual - Manually translated strings by Proofreaders

# Request of re-checks This document explains procedural work of Proofreaders with the function "Request re-check" ### Request Re-checks The "Request re-checks" feature provides a mechanism for interacting with proofreaders to address concerns or uncertainties regarding translated content. This feature allows project managers or team members to flag specific translations for further review by proofreaders. #### Purpose Sometimes, a translation may not accurately convey the intended meaning or may not align with the project's requirements. In such cases, it's crucial to request a re-check to ensure the quality and correctness of the translated content. #### Example Scenario Suppose a translation for the term "Upgrade" is incorrectly rendered as "Improvement" in Russian, and this translation has been approved by the proofreader. To rectify this, a team member can initiate a re-check request, flagging the translation for further review. In the request, they can specify that "Upgrade" should be accurately translated as "Button, call to action," providing clarity to the proofreader. ### How to view strings with re-checks After completing, or during the process of proofreading. Please constantly check if your Proofread material has been flagged for re-check, to do so: 1. Visit your [Babelshark account](https://babelshark.net/home) 2. Click the project you're assigned on 3. Click **Translations**\ ![](https://1290550914-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUf86Tx3GrUXukSHhL9ht%2Fuploads%2FH3LFyMSJmkYwtERNFaWu%2Fimage.png?alt=media\&token=868b6a57-1062-4f55-a182-59eb6d357856) 4. Click **Other filters** in the top-right section\ ![](https://1290550914-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUf86Tx3GrUXukSHhL9ht%2Fuploads%2FD1hfACoFExDrzPTSSAJ9%2Fimage.png?alt=media\&token=d97d901a-c0d0-4f70-8cc2-819144cdec48) 5. Enable **For re-check** option ### If Re-check was false-positive Its anticipated that sometimes Requests of Re-checks may be false-positive and your Proofreaded content may be accurate. If this will be the case for you, please contact your **Project Manager,** inform them of the false-positive and [re-approve the translation](/proofreader/how-to-proofread).

Profile info