Skip to main content

In-context translating

For local development, supply apiUrl,apiKey and ui to Tolgee configuration (see Integration). If you set everything properly, you can use in-context translating:

  1. Press and hold Alt/Option key
  2. Navigate mouse over any translation on your website
  3. It should get highlighted
  4. Click on it to open "Quick translation" dialog
  5. You can edit translations (changes will get stored to Tolgee platform)

In-context on production

To enable in-context translating on production you can pass apiKey and apiUrl through Tolgee Tools plugin, that way Tolgee will switch to development mode (plugin will also supply @tolgee/ui package automatically).

danger

Never include apiKey in Tolgee configuration on production. This property is intended only for local development, as it's not meant to be publicly visible.

  1. Install Tolgee Tools plugin
  2. Go to the production version of your website
  3. Click on Tolgee Tools extension and apply your API key (you might need to reload if you just installed the plugin)
  4. In-context translating should work

You can also check Step-by-step tutorial

A few notes about Tolgee Tools plugin

  • You can turn off development mode by switching "Applied" toggle, which will turn it off, but stores credentials locally so you don't have to fill it again next time
  • Plugin will supply apiUrl from Tolgee configuration if it's present (if not you can fill it manually)
  • Plugin will not allow you to modify credentials if you are in development mode already
  • Plugin changes its icon if Tolgee is present on the page or if credentials are set