This feature is available from the Pro plan and above.
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.
You may also check out this tutorial explaining how to get started with Lokalise and Storyblok. Please note that the provided screenshots might be slightly different from your experience if you're using Storyblok v2.
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.
Note, that due to Storyblok limitations language codes shouldn't include dashes " - " (for example you should use code "de_de" instead of "de-de").
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 app
Open your Lokalise project and click Apps in the main menu:
Find the Storyblok app, click on it, then press Install and then Connect.
Enter your personal access token in the dialog box:
To obtain a personal access token, return to Storyblok, click on your account in the bottom left corner, and then choose Account settings.
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 app:
Here choose your Storyblok space and the base language of your content. Once you are ready, hit Save.
Importing content from Storyblok to Lokalise
This app also supports automated import. You can learn more in the corresponding article.
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 the Import languages 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.
if you do not want to create translation keys for content that is empty on Storyblok, you can tick the Skip key creation for empty translations option.
If your current project has automations enabled, you'll be able to Automations options to apply your rules to the imported content.
You may also need to enable the Import references option. What does that mean? If you get an issue "Field is a reference":
it simply means that this item will not be imported on its own as it does not contain any translatable content. However, if you select this item and enable the Import references option then all records referenced from this field will get imported automatically.
Finally, you can assign one or more tags to the imported translation keys by adjusting the corresponding field.
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
This app also supports automated export. You can learn more in the corresponding article.
Once you have translated the content, you’ll need to export it back to Storyblok. To achieve that, proceed to the Apps page again and open the Storyblok app.
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 a 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 app enables you to manage localized content much easily!