On-Page Editor

The On-Page Editor, previously known as the In-Context Editor, offers a dynamic way to manage translations directly on your live web application or site. This guide provides comprehensive details for the current version of the editor.

Provide your translators with visual context when adding and editing translations, so they can see where translations appear on your website. The On-Page Editor will become an important part of your translation management workflows.

On-Page Editor

The On-Page Editor enhances the translation process by allowing users to directly interact with and edit translations within the context of their actual interface. This tool is invaluable for ensuring that translations not only remain accurate but also fit seamlessly into the UI/UX of your site.

Opening the On-Page Editor

Follow these instructions to use the In-Context Editor:

1. Click on Phrases: Manage Phrases in the left navbar.
2. Click on the In-Context Editor link.
   1. This link will be replaced by the On-Page Editor link in June 2025
3. Enter the desired URL and click Launch

Note: If you need to use the previous In-Context Editor, click the link in the blue information message.

You'll see your website with the On-Page Editor enabled, allowing you to view and edit translations for the phrases on the current page.

Workflows & Phrase Highlighting

While working in the On-Page Editor you will see phrases highlighted with specific colors to indicate their state within the active workflow. These are contextual while you are viewing the corresponding bin but not all active at the same time.

Bin Descriptions

1. Published - Phrases that have been published to your library
2. Translation QA - Phrases that are available for review if you have Translation QA enabled on the active language.
   1. Needs Review - Phrases that have translations available and are ready for review
   2. Needs Translation - Phrases that don't yet have a translation available to review
   3. Rejected - Phrases that have translations available but those translations have been rejected
3. Pending - Phrases that have been ingested from the active page
   1. Needs Approval - Phrases that are ready to be reviewed and approved for Publication to your library
   2. Auto-Blocked - Phrases that have been ingested but do not appear to be native content
4. Archive - Phrases that were ingested on the active page but are no longer in use
   1. Deprecated - Phrases that have been removed from your active library
   2. Blocked - Phrases that are blocked from being ingested or used in your active library
   3. Trash - Phrases that have been ingested and their information can be deleted

Phrase Highlighting

Each phrase in your site will be highlighted with a specific color corresponding to the bin and state that it is in.

• Published
  • Published with Machine Translation - Purple
  • Published with Human Approval - Green
  • Published without a Translation - Blue
• Translation QA
  • Needs Review - Yellow
  • Needs Translation - Blue
  • Rejected - Red
• Pending
  • Needs Approval - Green
  • Auto-Blocked - None
• Archive
  • Deprecated - None
  • Blocked - Orange
  • Trash - None

View Page Translation Stats

• Select "Pages" from the top menu of the editor to access translation stats per page.
• As you roll over a progress bar translation stats will be shown for that page.
• Click Load more pages at the bottom to see more in the list.

Editing a Translation

• Simply click on a translation to edit it in the panel on the left.
• Click a phrase directly on the page to jump directly to that phrase in the editing panel.
• While selecting a single phrase you can preview changes to the translation live before saving changes.

Moving Phrases Between Bins

• You can also move phrases between bins by using the bulk select checkbox then selecting the Move Icon.

Select a Language

• Select the language that you want to work with from the drop-down menu.

Searching

• You can search for a specific phrase by entering it in the Search... field.
• When done, click View all phrases.

Panel Placement

You can position the Editor Panel as follows:

• Un-Docked (Floating)
• Docked on the left
• Docked on the right
• Close the Editor Panel
  • You can re-open the Editor Panel from Phrases View in the top bar

Accessing the On-Page Editor for Specific Phrases

• Select the drop-down in Manage Phrases for the phrase you wish to look at live
• Click "Information"
• Click the "Requested from" link to open the editor for that phrase

Back to Dashboard

• Click the Exit link to return to your Localize dashboard.

Troubleshooting the On-Page Editor

Sometimes when using the On-Page Editor you will run into some problems.

Localize Not Installed

If you enter a URL for a website that doesn’t have Localize installed, you will see an error.

Advanced Troubleshooting

Is Localize Installed?

Make sure that the Localize JavaScript library is active and properly installed on your website or application. The editor will not work without the JavaScript SDK active on the page.

HTTPS Required

Please note that TLS/SSL connections are required for utilizing the In-Context Editor. "HTTP" only websites will no longer load within the editor due to security restrictions.

This often presents a problem when using the editor with localhost or staging environments. In these cases, you may utilize a SSL certificate to enable "HTTPS" on local or staging environments.

Alternatively, tools such as ngrok may be used to tunnel localhost connections through a public and secured temporary endpoint.

If using a self-signed SSL certificate, you may have to load the webpage outside of the editor to override browser warnings that may be triggered by self-signed certificates.