Storyblok is a headless content management system that allows to manage multi-purpose content. In this document you will learn how to integrate Storyblok with Lokalise.
First of all, you will need to add the desired content languages on Storyblok. To achieve that, open your Storyblok board and proceed to Settings > Languages:
Here you can set a default language of your content and add other languages that you would like to translate into. In the example above, we have English set as the default locale along with two additional languages: Russian and Spanish.
Once you have adjusted language settings and hit Save.
Also make sure to mark all the necessary schema fields as Translatable. To achieve that, open your content and click Define schema:
Next choose one of the fields, tick the Translatable option and then click Save schema:
Now you can return to Lokalise!
Setting up the integration
Open your Lokalise project, click the More button, and choose Integrations:
Use the search box in the top right corner to find the “Storyblok” integration. Hit Connect:
Click Connect once again and enter your personal access token:
To obtain a personal access token, return to Storyblok, click on the small arrow in the top left corner, and then choose My account:
Find the Personal access tokens section and hit Generate new Token:
Copy your new token, return to Lokalise, paste it into the corresponding text box, and click Authorize. Please note that your personal token must be kept secure and should not be publicly exposed!
You will be presented with another dialog to configure the integration:
Here choose your Storyblok space and the base language of your content. Once you are ready, hit Save.
Importing content from Storyblok to Lokalise
Your Storyblok data will be loaded automatically (you might need to click Reload list to see all the items).
If you need to refresh the loaded data, click on the following icon:
After the refresh process is completed, you’ll see a notification message:
To start translating your content on Lokalise, you’ll need to import the desired items first. To achieve that, find the items you want to translate and put checkmarks next to them:
You can also use the search box in the top right corner or construct a new filter using the Filter dropdown. Once you are ready, click Import selected.
Choose the content languages that you would like to import:
For example, if your content is currently available only in English, then you can remove all other languages from this list as the corresponding translations are empty anyways.
If you have already imported the chosen items once and wish to download newer versions of the same items, then tick the Overwrite updated translations checkbox. Please note that this will overwrite all the corresponding translations in your Lokalise project with new versions from Storyblok.
Click OK. Your content will be imported to Lokalise in the background. After this process is finished, you’ll see a notification message:
Now return to the project editor by clicking on the project name in the top left corner. You will see all the imported content:
At this point you can perform translations as usual.
Each translation key has a handful of tags represented as colored ellipses:
First post (orange) — this is the name of my entry on Storyblok.
My Post (dark blue) — content type.
Storyblok (purple) — this tag simply means that the content was downloaded from Storyblok.
You may use these tags to filter your translations. To achieve that, click Filter > Tag and choose the tags that you are interested in:
Exporting content from Lokalise to Storyblok
Once you have translated the content, you’ll need to export it back to Storyblok. To achieve that, click More > Integrations again and open the Storyblok integration.
Find the items that you wish to export, tick the checkboxes next to them, and click Export selected:
Choose the languages that you would like to export:
If needed, uncheck the Don’t export empty translations option. Once you are ready, click OK. Once the process is finished, you’ll see the following notification message:
Checking the result
At this point you can return to Storyblok and check the result! For example, let's open the first blog post to make sure that its title and body were translated properly:
To change the content language, use the dropdown at the top menu:
And this is it! You can repeat the whole process again to translate more Storyblok content with ease. As you can see, there is nothing complex about integrating Storyblok with Lokalise, and this integration enables you to manage localized content much easily!