# Instrumenting your code
## locizify
> Zero effort - drop one line of code.
Using our locizify script is the simplest way to get your website or webapplication translated. We highly recommend using it on your static site generators like wordpress, shopify, ...
Drop one line of code:
```javascript
```
*You can find your projectId and API Key in your projects settings. (You should not expose your write API key into production - only use it during development)*
Reload your page and see the phrases ready to translate in your locize project.
Find more details and configuration options on the [github page](https://github.com/locize/locizify).
{% embed url="" %}
{% endembed %}
## i18next
> Best translation management for [i18next](https://locize.com/i18next.html).
You can use locize in combination with i18next. I18next is a well known internationalization framework and offers a wide range of framework integrations and plugins for almost every need.
[Learn more about i18next](http://i18next.com)
{% embed url="" %}
{% hint style="success" %}
[Here](https://locize.com/blog/react-i18next/) you'll find a simple tutorial on how to best use [react-i18next](https://react.i18next.com/).\
Some basics of i18next and some cool possibilities on how to optimize your localization workflow.[
](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb)[
](https://locize.com/blog/react-i18next/)
{% endhint %}
To connect i18next with the locize service integrate the [i18next-locize-backend](https://github.com/locize/i18next-locize-backend):
```javascript
import i18next from 'i18next';
import Backend from 'i18next-locize-backend';
i18next
.use(Backend)
.init({
// ...other options
backend: {
projectId: '[PROJECT_ID]',
apiKey: '[API_KEY]',
referenceLng: '[LNG]'
}
});
```
*(You should not expose your write API key into production - only use it during development)*
[Here you can find a step by step react tutorial.](https://github.com/locize/react-tutorial)
{% embed url="" %}
[code integration](https://www.youtube.com/watch?v=RodGMOLIJog) part of [showcase/demo](https://www.youtube.com/watch?v=TFV_vhJs5DY)
{% endembed %}
### Other i18next tutorials:
{% hint style="success" %}
[Here](https://locize.com/blog/unleash-the-full-power-of-angular-i18next/) you'll find a simple Angular tutorial on how to best use [angular-i18next](https://locize.com/blog/angular-i18next/).[
](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb)[
](https://locize.com/blog/unleash-the-full-power-of-angular-i18next/)
{% endhint %}
{% hint style="success" %}
Are you still using i18next in [jQuery](https://github.com/i18next/jquery-i18next)? Check out [this tutorial blog post](https://locize.com/blog/jquery-i18next/).
[](https://locize.com/blog/how-to-jquery-i18next/)
{% endhint %}
{% hint style="success" %}
**Are you using** [**Next.js**](https://nextjs.org/)**?**\
[Here](https://github.com/locize/next-i18next-locize) you can find an example with different approaches and a [blog post](https://locize.com/blog/next-i18next/) explaining this.
[](https://locize.com/blog/next-i18next/)\
\
**Using Next.js 13/14 with the new app directory?**\
Then [this article](https://locize.com/blog/next-app-dir-i18n/) is what you are looking for.
[](https://locize.com/blog/next-app-dir-i18n/)
{% endhint %}
{% hint style="success" %}
**Are you using Gatsby?**\
[Here](https://github.com/locize/locize-gatsby-example) you can find an example and an appropriate [blog post](https://locize.com/blog/gatsby-i18n/).
[](https://locize.com/blog/gatsby-i18n/)
{% endhint %}
{% hint style="success" %}
**Are you using** [**Remix**](https://remix.run/)**?**\
[Here](https://github.com/locize/locize-remix-i18next-example) you can find a simple example and a [step by step tutorial](https://locize.com/blog/remix-i18next/).
[](https://locize.com/blog/remix-i18next/)
{% endhint %}
{% hint style="success" %}
**Are you using** [**Vue.js**](https://vuejs.org/)**?**\
[Here](https://github.com/locize/locize-i18next-vue-example) you can find a simple example and a [step by step tutorial](https://locize.com/blog/i18next-vue/).
[](https://locize.com/blog/i18next-vue/)
{% endhint %}
## other options
### client side: polyglot, formatjs, react-intl, vue-i18n, js-lingui, messageformat, ...
{% hint style="info" %}
For server side rendering (SSR) or serverless usage, we do **not** suggest to use our locizer script. Because of this we suggest to download the translations in your CI/CD pipeline (via [cli](https://github.com/locize/locize-cli#download-current-published-files) or via [api](https://docs.locize.com/integration/api#list-all-namespace-resources)) and package them with your application. Like described [here](https://github.com/locize/i18next-locize-backend#important-advice-for-serverless-environments---aws-lambda-google-cloud-functions-azure-functions-etc).
{% endhint %}
On client side, you can use our [locizer](https://github.com/locize/locizer) script to load translations from locize and add them to your i18n framework in the browser:
Sample for polyglot:
```javascript
//
locizer
.init({
fallbackLng: 'en',
referenceLng: 'en',
projectId: '[your project id]'
})
.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):
```javascript
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*](https://github.com/locize/locizer/tree/master/example/vue)*.*
{% hint style="success" %}
[Here](https://locize.com/blog/give-vue-i18n-more-superpowers/) you'll find a simple tutorial on how to best use [vue-i18n](https://kazupon.github.io/vue-i18n/).\
Some basics of vue-i18n and some cool possibilities on how to optimize your localization workflow.[
](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb)[
](https://locize.com/blog/give-vue-i18n-more-superpowers/)
{% endhint %}
For more details checkout [locizer docs](https://github.com/locize/locizer).
Our samples:
* [react-intl](https://github.com/locize/locize-react-intl-example)
* [vue-i18n](https://github.com/locize/locizer#vue-i18n-vue-v3)
* [svelte-i18n](https://locize.com/blog/svelte-i18n/)
* [formatjs](https://github.com/locize/locize-formatjs-example)
* [polyglot](https://github.com/locize/locize-polyglot-example)
* [js-lingui](https://github.com/locize/locize-js-lingui-example)
* [ngx-translate](https://github.com/locize/ngx-translate-example)
* [transloco](https://github.com/locize/transloco-example)
### 3rd party modules
* [react-intl-namespaces](https://github.com/maciejw/react-intl-namespaces) Integrations of react-intl internationalization library with locize.com online translation service. Comes with support for namespaces, incontext editor, ...
### serverside
{% hint style="success" %}
Did you know internationalization is also important on your app's backend? In [this tutorial blog post](https://locize.com/blog/how-does-server-side-internationalization-look-like/) you can check out how this works.[
](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb)[
](https://locize.com/blog/how-does-server-side-internationalization-look-like/)
{% endhint %}
For JavaScript environments please watch out for the [i18next integration options](https://www.i18next.com/overview/supported-frameworks) and [plugins](https://www.i18next.com/overview/plugins-and-utils#backends).
On other environments you could use:
* [Our API](/integration/api.md)
* [Our locize-cli](https://github.com/locize/locize-cli)
### other formats xliff, gettext, ...
You can use following modules to convert between formats:
* [xliff](https://github.com/locize/xliff)
* [android-string-resource](https://github.com/locize/android-string-resource)
* [gettext (.mo/.po)](https://github.com/i18next/i18next-gettext-converter)
Simplest is to use those in combination with our [cli](https://github.com/locize/locize-cli) to build an automated production pipeline powered by grunt, gulp, npm script, ...
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs-old.locize.com/integration/instrumenting-your-code.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.