Get Started with LingoJS

Add multilingual support to your website with one lightweight snippet. This guide takes you from creating a project to publishing your first translation.

What you will do

1. Create a project and get its project key

2. Install the LingoJS snippet

3. Test the integration locally or deploy it

4. Verify the installation

5. Detect and publish your first translation

1. Create your project

1. Create a LingoJS account or sign in.

2. Create an organization and a project from the dashboard.

3. Choose the language already used by your website as the base language.

4. Add the languages you want to offer to your visitors.

Your project key is available in Dashboard > Project. It identifies the project used by the snippet.

The project key is a public identifier and can safely appear in your website code. Never place a development token in production code.

2. Install the snippet

Choose the guide that matches your website:

• React

• Next.js

• WordPress

• Framer

Each guide shows where to load the snippet and where to add your project key.

Your production configuration should look similar to this:

window.lingojs.initialize({
  projectKey: 'YOUR_PROJECT_KEY',
  baseLanguage: 'en',
  targetLanguage: 'fr',
  showWidget: true,
  rememberLanguage: true
});

Replace the project key and language codes with the values configured in your project.

3. Test locally

Skip this step if you are installing the snippet directly on your production website.

If Domain restriction is enabled, local websites connecting to the production LingoJS API require a development token:

1. Open Dashboard > Project > Project Settings.

2. Make sure Development Mode is enabled.

3. Create a named token for your local environment.

4. Copy the token immediately. It is shown only once.

5. Add it only to your local snippet configuration:

window.lingojs.initialize({
  projectKey: 'YOUR_PROJECT_KEY',
  baseLanguage: 'en',
  targetLanguage: 'fr',
  devToken: 'YOUR_DEVELOPMENT_TOKEN'
});

If domain restriction is disabled, local requests follow the same open Pending workflow as requests from any other domain and no development token is required.

Never deploy, publish, share, or commit a development token. Remove devToken from the production configuration before deployment. If a token is exposed, delete it from Project Settings and create a new one.

4. Verify the installation

After deploying the snippet:

1. Open Dashboard > Project.

2. Find your domain in the Domain access section.

3. Click Check.

A green Snippet installed status confirms that LingoJS found the current project key on the public website.

If the status is Snippet not found:

• confirm that the deployment is public;

• verify that the configured domain is correct;

• verify that the snippet contains the correct project key;

• clear any CDN or website cache, then click Check again.

The installation check is informational. It does not enable or disable translations.

5. Publish your first translation

1. Open a page containing the installed snippet.

2. Browse the page in its base language so LingoJS can detect its text.

3. Open Dashboard > Project > Translations.

4. Review the newly detected Pending translations.

5. Publish the translations you want to make available. LingoJS then prepares the project's target-language versions.

6. Wait until the translated values are available, then edit them if needed.

7. Reload the website and switch to the target language.

Only Published translations are served to visitors. A newly detected Pending item is waiting for your publish or block decision.

New translations remain Pending by default. Auto-publish is an optional workflow that should be configured only after the basic integration works.

6. Customize the experience

Once the first translation works, you can:

• customize the language switcher from Dashboard > Widget;

• add more target languages;

• use translate="no" to exclude content from translation;

• enable domain restriction;

• explicitly enable global or per-element auto-publish.

Next steps

• Integration guides — framework-specific installation

• Allowed Domains & Security — production access and domain verification

• Local Development — development tokens and revocation

• Auto-Publish — global and lingojs-autopublish="yes" workflows

• Widget Configuration — language switcher appearance and behavior

• Troubleshooting — common installation and detection issues