Connect your Hygraph project to Lokalise

Lokalise is a localization management platform where teams can easily build and manage workflows for multiple locales and translations of existing content. It enables teams to build collaborative workflows around localization, ensure high quality translations are pushed live, and create new locales for a wide range of digital products, from applications to websites.

What you can do with the Hygraph-Lokalise integrationAnchor

  • With the Hygraph-Lokalise integration, teams can simplify their workflows between Lokalise and Hygraph by creating bulk imports and exports of content and easily manage multiple locales for their digital products through a dedicated interface within Hygraph.

Prerequisites to use this integrationAnchor

Install the Lokalise AppAnchor

Click here to install the Lokalise App on Hygraph, then follow these steps:

Lokalise installation
Lokalise installation

  1. In the dropdown, select which project you want to install the app in, then click on the Add App button. You should be redirected to your Hygraph project dashboard.
  2. Fill in the API token and the Project ID. This information can be found in your Lokalise account. The Hygraph UI provides links that show you how to get the information you need next to each requested field.
  3. Select at least one model to use Lokalise in. This information can be edited later.
  4. Click on the Save button.

Use Lokalise in your Hygraph projectAnchor

As you create content, it will display in the Lokalise section of the Content editor, under App views. From there, you will be able to export content to Lokalise to be translated, then import those translations into Hygraph.

Please note that only the content created using the Model that you selected during the Lokalise installation process will be displayed on this list.

You can edit this from your Hygraph project by navigating to Apps > Lokalise, clicking on the pencil icon to edit, then using the checkboxes to select the desired models.

Finally, after the process has been completed, you will be able to visualize the translated content normally by accessing the Content editor.

Export TranslationAnchor

Submit to translate
Submit to translate

  1. Navigate to the content editor.
  2. Select Lokalise under the App views section of the right sidebar.
  3. Use the checkboxes to select the desired content from the list, and send it to Lokalise by clicking on the Submit to Translate link at the top of the form.
  4. A pop-up will display, where you need to select the locales to export. Select the necessary checkboxes, and click on the Export translation button.
  5. The translation status will change to In progress, and you will be able to find the content ready to translate in your Lokalise account.

The following fields are supported to be exported to Lokalise:

  • Single-line text
  • Multi-line text
  • Markdown
  • Richtext
  • Slug

Export is also supported for Basic and Modular Components, but only for the supported field types.

Attempting to export unsupported fields will result in an error.

You can copy the entry ID and use it on Lokalise to filter the entry there and easily find it.

Import translationAnchor

After exporting content to Lokalise, it will be translated and saved there. You can then import that content back to Hygraph by following these steps:

Import translation
Import translation

  1. Navigate to the Lokalise section of the Content editor. Use the checkboxes to select the entries that you want to import translations for, then click on the Import Translation link at the top of the form.
  2. A pop-up will display, where you need to select the language or languages of the content being imported. Select the necessary checkboxes, and click on the Import translation button. The translation status will change to Imported as a result.

The following fields are supported to be imported from Lokalise:

  • Single-line text
  • Multi-line text
  • Markdown
  • Richtext
  • Slug

Import is also supported for Basic and Modular Components, but only for the supported field types.

Attempting to import unsupported fields will result in an error.

Please note that the status Done means that all translations on Lokalise have been finished and that the content is ready to be imported.

Visualize translationsAnchor

  1. Navigate to the content editor, and select the view of the model you included Lokalise in.
  2. Edit an entry that you imported a translation for by clicking on the pencil icon. The content will display at the center of the screen.
  3. You will find the Localizations section in the right sidebar. You have the following options:
    1. Click on the + icon to add a translation.
    2. Click on the trash icon to delete a translation.
    3. Click on the eye icon to visualize a translation in the editor.

Visualize translations
Visualize translations

TroubleshootingAnchor

If the Content Editor displays the message This model has no localized fields under localizations in the sidebar, while the Schema Editor has localizations configured, go to Project settings > Locales. There, make sure your project has at least two languages configured.

Locales in project settings
Locales in project settings

If you have only one language configured there, select another language for localizations using the Display name dropdown, then click on Add.

Please note that free plans can have a maximum of 2 locales.

ResourcesAnchor