Connect the in-context editor

Create the publishable key your site needs so reviewers can edit and capture strings in place.

Who this is for

Owners and admins.

Before you start

Know which sites will run the in-context editor. You will list their addresses, and only those addresses are allowed to use the key.

Steps

Open the project's Screenshots.
In the create-key form, enter a Key name: something that identifies the site, like "Production web app".
In Allowed origins (one per line), list each site that may use this key, one per line, for example https://app.example.com then https://staging.example.com.
Select Create publishable key.

What happens next

You get a publishable key to put in your site's in-context editor script. It is publishable by design (it goes in a browser), which is exactly why the origin list matters: the key only works from the addresses you named, so it cannot be lifted and used elsewhere.

Once the script is live, reviewers can open any string on your site and read it in place.

Turning on editing and screenshots

The publishable key alone gives a read-only editor. Because that key sits in your page source where anyone can copy it, it can never be enough to change your translations. Save stays disabled, the AI suggestion button is not shown, and nothing is captured for the screenshot library.

To let a reviewer actually edit, your own backend has to vouch for them. Add two things to the editor script:

writableKeys: the strings this reviewer is allowed to change.
getNonce: a function that calls an endpoint on your server, which in turn calls POST /v1/incontext/session-nonce on the transglot API using a project token with the write ability, and returns the short-lived nonce it gets back.

Mint that project token under the project's developer settings. Keep it on your server: it is a secret, unlike the publishable key.

That extra call is the whole point. It is the step only your application can perform, so it proves the person editing is a reviewer you recognise rather than a visitor who copied a key out of your HTML. Once it is in place, Save works, the AI suggestion button appears, and screenshots start reaching the library.

The copy-paste snippet on the project's Screenshots and Deploy screens already includes both, wired to a /api/transglot-nonce route on your side for you to implement.

If it doesn't work

If the editor does not load on your site, check the site's address is in Allowed origins exactly, including https:// and any port.
If the editor loads but every field is read-only and Save is greyed out, the script has no getNonce. That is the read-only default, not a fault: see "Turning on editing and screenshots" under What happens next.
If nothing reaches the screenshot library, it is the same cause. Captures are taken as part of an edit, so a read-only session never produces one.
If the create-key form is not shown, you do not have permission to manage publishable keys in this project.

The screenshot library
Project developer settings