Connect the in-context editor
Set up the in-context editor so your reviewers can read, edit and screenshot strings on your own site.
The in-context editor lets a reviewer open any string where it appears in your app, read it in place, and, once editing is turned on, change it and capture a screenshot for the screenshot library. This page covers what an Owner or Admin sets up in transglot. Adding the editor to your app's code is a developer task, covered in Install the in-context editor.
The in-context editor is included on Starter and above.
Create a publishable key
The editor identifies your project with a publishable key. It is designed to sit in your site's code, where anyone can read it, so it only works from the web addresses you list.
Open the Connection card
Open the project and select Screenshots in the sidebar. The key form is in the Connection card. (The same keys are listed in Settings → Developer under Publishable keys.)
Name the key
Enter a Key name that identifies the site, such as Production web app. Use one key per app you add the editor to.
List the allowed origins
In Allowed origins (one per line), list each address the editor will run on, with its scheme and any port:
https://app.example.com
https://staging.example.comCreate it
Select Create publishable key. The SDK snippet card below is now pre-filled with the key.
Once the editor runs on your site, the key's status in Connection changes from Never connected to Connected, then shows when it was Last seen.
Show the editor to reviewers only
The editor cannot tell a reviewer from a visitor, so your app decides who gets it. The snippet on the Screenshots page, and under One provider in Releases → Connect & SDK, adds the editor only for signed-in users your app treats as reviewers. Keep that check when you adapt it.
Turn on editing and screenshots
With the publishable key alone, the editor is read-only: reviewers can read strings in place, but saving is disabled, AI suggestions are not offered, and nothing is captured for the screenshot library. A key that anyone can copy from your page source must never be enough to change your translations.
To let a reviewer edit, your own server vouches for them:
- Your app passes the editor the strings this reviewer may change (
writableKeys) and a function (getNonce) that asks your server for a one-time pass. - Your server calls
POST https://api.transglot.ai/v1/incontext/session-noncewith a deploy token that has thewriteability, naming the publishable key and the strings, and returns the single-use nonce it gets back. The nonce expires about a minute after it is issued. - The editor trades the nonce for an editing session limited to those strings.
The deploy token is a secret: keep it on your server, never in the page. The snippet in the console already includes writableKeys and getNonce, wired to a /api/transglot-nonce route on your side for you to implement. Install the in-context editor has the server code.
Once this is in place, Save works, AI suggestions appear, and the screenshots reviewers capture while editing reach the library.
Delete a key
Select Delete next to the key in Connection and confirm. Every site using it stops loading the editor straight away. Create a replacement and roll it out first if the key is in use.
If it doesn't work
| What you see | What to check |
|---|---|
| The editor does not load | The site's address must be in Allowed origins exactly, including https:// and any port. Otherwise the editor is refused with "This publishable key is not authorized for this origin." |
| Every field is read-only and Save is disabled | The editor has no getNonce, or your server did not return a nonce. That is the read-only default, not a fault: see Turn on editing and screenshots. |
| Nothing reaches the screenshot library | Same cause: screenshots are captured as part of an edit, so a read-only session never produces one. |
| The key form is not shown | Only Owners and Admins can create publishable keys or see the existing ones. |
| "The in-context editor unlocks on the Starter plan." | Your plan does not include the in-context editor. |