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.

Setup and configuration

1) Add the Locize script

Add the Locize script to your page. More detailed information can be found here.

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: