Instrumenting your code

Easily connect your application to Locize for seamless translation management and real-time localization updates. Below are the recommended ways to instrument your code for different environments and frameworks.

locizify (Zero Effort Integration)

Zero effort – drop one line of code.

The locizify script is the simplest way to get your website or web application translated. It’s highly recommended for static site generators like WordPress, Shopify, and similar platforms.

Just add one line to your HTML:

<script
    id="locizify"
    projectid="[PROJECT_ID]"
    apikey="[API_KEY]"
    fallbacklng="[LNG]"
    saveMissing="true"
    src="https://unpkg.com/locizify@^9.0.3"
    autopilot="true"
    cdnType="standard"
></script>

You can find your projectId and API Key in your project settings.
Do not expose your write API key in production – only use it during development.
Reload your page and see phrases ready to translate in your Locize project.
Find more details and configuration options on the locizify GitHub page.

Watch a quick demo

i18next (Full-Featured Integration)

Best translation management for i18next.

Locize works seamlessly with i18next, a popular internationalization framework with a wide range of integrations and plugins for almost every need.

Learn more about i18next

Watch a quick overview

To connect i18next with Locize, use the i18next-locize-backend:

import i18next from 'i18next';
import Backend from 'i18next-locize-backend';
i18next
  .use(Backend)
  .init({
    // ...other options
    backend: {
      projectId: '[PROJECT_ID]',
      apiKey: '[API_KEY]',
      cdnType: 'standard'
    }
  });

Do not expose your write API key in production – only use it during development.
Step-by-step React tutorial
Code integration video (part of showcase/demo)

Here you'll find a simple tutorial on how to best use react-i18next, including basics and workflow optimizations.

Other Options

Client-Side: Polyglot, FormatJS, React-Intl, Vue-I18n, JS-Lingui, MessageFormat, ...

For server-side rendering (SSR) or serverless usage, we do not suggest using our Locizer script. Instead, download the translations in your CI/CD pipeline (via CLI or via API) and package them with your application, as described here.

On the client side, you can use our locizer script to load translations from Locize and add them to your i18n framework in the browser:

Sample for Polyglot:

// <script src="https://unpkg.com/locizer/locizer.min.js"></script>
locizer
  .init({
    fallbackLng: 'en',
    projectId: '[your project id]',
    cdnType: 'standard'
  })
  .load('translation', function(err, translations, lng) {
    const polyglot = new Polyglot({ phrases: translations, locale: lng });
    console.log(polyglot.t('some key'));
  });

Sample for Vue-I18n (Vue v3):

import { createI18n } from 'vue-i18n'
import Locizer from 'locizer'
locizer.init({
  projectId: 'project-id'
});
export const i18n = createI18n({
  locale: Locizer.lng, // set locale
  fallbackLocale: 'en' // set fallback locale
  // If you need to specify other options, you can set other options
  // ...
});
// called from within setup hook in App.vue
export const loadMessagesPromise = new Promise((resolve, reject) => {
  Locizer.loadAll('messages', (err, messages) => {
    if (err) return reject(err);
    Object.keys(messages).forEach((l) => {
      i18n.global.setLocaleMessage(l, messages[l])
    });
    resolve(messages);
  });
})

The full example can be found here.

Here you'll find a simple tutorial on how to best use vue-i18n. Some basics of vue-i18n and some cool possibilities on how to optimize your localization workflow.

For more details, check out the locizer docs.

Our samples:

Server-Side

Did you know internationalization is also important on your app's backend? In this tutorial blog post you can check out how this works. For JavaScript environments please watch out for the i18next integration options and plugins. On other environments you could use:

Other Formats: XLIFF, Gettext, ...

You can use the following modules to convert between formats:

The simplest way is to use these in combination with our cli to build an automated production pipeline powered by grunt, gulp, npm script, ...