InContext

This approach loads your website via an iframe in the InContext view. For an alternative approach, have a look at the locize module or the locizify script in combination with the query parameter ?incontext=true.

The InContext view

Correct translations often need more context. The best context is where the content is shown: your website.

So we bring your Locize project closer to your website/application:

When integrated correctly, you can click any text element on your website shown in the iframe. Locize will use that information to find the matching key/value on the left.

If you need to navigate on your page, you can turn click interception on/off using the button next to your website URL.

Make sure to select the language you want to work on at the top.

An example video can be found here: https://www.youtube.com/watch?v=f0ukRI0LMfo&t=292s

Setup and configuration

1) Add the Locize script

Add the Locize script to your page. More detailed information can be found here: https://github.com/locize/locize#with-i18next

2) Define URLs

Navigate to your project's settings:

Select "Set InContext editor urls" in the menu:

Set the desired url(s):

Back to your project overview, navigate to the InContext Editor:

Result: