Introducing: In-Context Editor
We are thrilled to announce the launch of our new In-Context Editor! This feature allows you to edit translations directly within the context of your application, providing a more intuitive and efficient way to manage your localization projects.
What is the In-Context Editor?
In-Context Editor allows you to see your translations in the context of your website or application. This means you can view and edit translations while seeing how they appear in the actual user interface, making it easier to ensure that your translations fit well within the design and flow of your application.
With the In-Context Editor, you can quickly identify any issues with translations, such as text that is too long or does not fit properly within the UI elements. It can speed up the translation process by allowing you to make adjustments on the fly, without needing to switch back and forth between different tools or interfaces.
How to enable the In-Context Editor
To integrate the In-Context Editor into your project, follow these steps:
Installation
First, add the SimpleLocalize script to your website or application, ideally in the <head> section or just before the closing </body> tag. This will ensure that the In-Context Editor is loaded when your page is rendered.
<script>
window.simplelocalize = {
projectToken: 'your-project-token',
};
</script>
<script src="https://get.simplelocalize.io/js/in-context-editor.iife.js" defer/>
Make sure to replace 'your-project-token' with your actual project token from SimpleLocalize. You can find this token in your SimpleLocalize project settings (Credentials section).
Load the script only in the environments where you want to use the In-Context Editor, such as staging or development. Avoid loading it in production environments unless you are ready to edit translations live.
Configuration
Next, configure the In-Context Editor by specifying the elements you want to be editable. You can do this by adding the data-translation-key attribute to the HTML elements you want to translate. For example:
<h1 data-translation-key="welcome_message">Welcome to our website!</h1>
<p data-translation-key="description">This is a sample description text.</p>
You can use another attribute, e.g. one you are already using for translations, as long as it is consistent across your project. To make it work, specify it in the SimpleLocalize script as dataAttributeKey:
<script>
window.simplelocalize = {
projectToken: 'your-project-token',
dataAttributeKey: 'data-i18n', // or any other attribute you use
};
</script>
<script src="https://get.simplelocalize.io/js/in-context-editor.iife.js" defer/>
You can also specify namespaces for your translation keys by using the
data-translation-namespaceattribute.
Accessing the Editor
Once the script is added and configured, you can access the In-Context Editor by clicking on the SimpleLocalize icon in the bottom right corner of your application.
Before you can start editing, you need to enter your SimpleLocalize personal access token. You can find this token in your SimpleLocalize profile in the Security section.
How to use the In-Context Editor
With the In-Context Editor open, choose the language version you would like to display and see how your translations look in the context of your application. You can switch between languages using the language selector in the top right corner of the editor.
Click on any text element to edit its translation. The editor will display the current translation and allow you to modify it directly.
The editor allows you to:
- Edit translations: Click on any text element to modify its translation.
- Add new translations: If a translation does not exist, you can add it directly in the editor.
- Preview changes: See how your changes look in real-time within the context of your application.
- Save changes: Once you are satisfied with your edits, click the "Save" button to apply your changes. The updated translations will be saved in your SimpleLocalize project.
Conclusion
Enable the In-Context Editor in your project to provide a more intuitive and efficient way to manage your translations. This feature is designed to streamline the localization process, making it easier for you to ensure that your translations fit perfectly within your application's design and user experience.
We hope you find the In-Context Editor a valuable addition to your localization toolkit. If you have any questions or feedback, please feel free to reach out to us and let us know how it works for you!
For more information on how to use the In-Context Editor, check out our documentation.
