Migrating from the old InContext editor
The InContext Editor feature has been fundamentally changed. Now the InContext Editor is part of the locize UI and not a separate web component anymore.
tl;dr: Make sure to load this script and paste your website url in the in-built InContext view of the locize UI.
If you are using the old locize-editor this guide will help you to migrate to the new approach.
Migration should be straight forward...

1) Replace the old locize-editor

Replace the old locize-editor with the new locize script

with i18next

1
import { locizePlugin } from 'locize';
2
3
i18next.use(locizePlugin)
4
5
// Using react-i18next you might want to bind the editorSaved event to trigger a rerender:
6
i18next.init({
7
// ...
8
react: {
9
bindI18n: 'languageChanged editorSaved'
10
}
11
})
Copied!

with locizify

The locize script is already included in locizify >= v4.1.0

with other as module

1
import { addLocizeSavedHandler } from 'locize';
2
3
addLocizeSavedHandler((res) => {
4
res.updated.forEach((item) => {
5
const { lng, ns, key, data } = item;
6
// load the translations somewhere...
7
// and maybe rerender your UI
8
})
9
});
Copied!

with other in vanilla javascript

1
<script src="https://unpkg.com/locize/locize.min.js" />
Copied!
1
window.locizeSavedHandler = (res) => {
2
res.updated.forEach((item) => {
3
const { lng, ns, key, data } = item;
4
// load the translations somewhere...
5
// and maybe rerender your UI
6
})
7
};
Copied!

2) The new InContext view

In your project go to the InContext view and type in your URL:
You can set a default URL per version in your Version Settings:
Or you can place a link somewhere pointing to:
1
https://www.locize.app/cat/[YOUR_SLUG]/v/latest/incontext?sourceurl=[YOUR_URL] (Your Url should be encoded using encodeURIComponent(…))
Copied!
Last modified 9mo ago