> For the complete documentation index, see [llms.txt](https://docs-old.locize.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-old.locize.com/whats-inside/context.md).

# Context

* [Context information per key/segment](#context-information-per-key-segment)
* [InContext](/whats-inside/context.md#incontext)
* [Screenshots](#screenshots)

{% embed url="<https://www.youtube.com/watch?v=g3TmRfK9I2o>" %}
[context information](https://www.youtube.com/watch?v=TFV_vhJs5DY\&t=485s) part of [showcase/demo](https://www.youtube.com/watch?v=TFV_vhJs5DY)
{% endembed %}

## Context information per key/segment

In the [Focus view](/different-views/focus.md) you can set a specific context information for each individual key/segment:

![](/files/a5a4sMvlpafOFcZ3umwA)

It accepts markdown syntax, this way you can style that context information in a simple way.

{% hint style="info" %}
Check out [this section in the video](https://www.youtube.com/watch?v=TFV_vhJs5DY\&t=487s) to see how the context information can be used.
{% endhint %}

## InContext

There are 2 approaches on how to use the InContext editor.

### The locize popup in your website

Use the [locize](https://github.com/locize/locize) module, i.e. via [locizify](https://github.com/locize/locizify#access-to-locize-script-locize-incontext-editor) or via [i18next plugin](https://github.com/locize/locize#with-i18next), [etc](https://github.com/locize/locize#locize)... and pass `?incontext=true` in your url.

<figure><img src="/files/eAcuehpR7Rz1F4iaAUHw" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
This option will not work for SSO users. You need a "normal" locize user for this to work.
{% endhint %}

### Your website in locize (iframe)

The [InContext view](/different-views/incontext.md) enables you to directly connect content from your website / application with your content on your localization project on locize.

To know more about it, check out [this guide](/different-views/incontext.md).

![](/files/2oVAjfI2kDfROR0HtNZB)

{% hint style="info" %}
Check out [this section in the video](https://www.youtube.com/watch?v=TFV_vhJs5DY\&t=486s) to see how the InContext editor can be used.
{% endhint %}

## Screenshots

Another great way to provide better context information for your translators, is using the screenshot feature.

### 1. Navigate to the screenshots page

![](/files/Bi34wG06SmCrSlpPFblB)

### 2. Upload a screenshot

![](/files/2vZIvpQFwBvEAQrLE1vI)

### 3. Assign keys/segments

![](/files/rCq12u3yc4C9liBFhkFl)

### 4. Click the add button and find and select the appropriate key/segment

![](/files/9XhIR6UAA7ID3nvtW2z0)

### 5. Optionally, you now can also define a bounding box around the text

![](/files/h2erLkAZNTtwKOLbzeVK)

![](/files/sVTIB2Fl1rm56NQRmqgK)

### 6. In the [Global view](/different-views/global.md) and in [Focus view](/different-views/focus.md), you'll now see that screenshot

![](/files/s1CpYGEYCvuIr3sbppGj)

{% hint style="warning" %}
The screenshots are shown for the assigned keys in all versions.
{% endhint %}

{% hint style="info" %}
Check out [this section in the video](https://www.youtube.com/watch?v=TFV_vhJs5DY\&t=513s) to see how screenshots can be used.
{% endhint %}