> For the complete documentation index, see [llms.txt](https://lingojs.gitbook.io/lingojs-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lingojs.gitbook.io/lingojs-docs/readme.md).

# 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](https://www.lingojs.com/signup) 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.

{% hint style="info" %}
The project key is a public identifier and can safely appear in your website code. Never place a development token in production code.
{% endhint %}

## 2. Install the snippet

Choose the guide that matches your website:

* [React](https://lingojs.gitbook.io/lingojs-docs/basics/integrations-1)
* [Next.js](https://lingojs.gitbook.io/lingojs-docs/basics/integrations-2)
* [WordPress](https://lingojs.gitbook.io/lingojs-docs/basics/integrations-3)
* [Framer](https://lingojs.gitbook.io/lingojs-docs/basics/integrations-4)

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

Your production configuration should look similar to this:

```js
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:

```js
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.

{% hint style="danger" %}
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.
{% endhint %}

## 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**.

{% hint style="info" %}
The installation check is informational. It does not enable or disable translations.
{% endhint %}

## 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.

{% hint style="info" %}
New translations remain Pending by default. Auto-publish is an optional workflow that should be configured only after the basic integration works.
{% endhint %}

## 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