How to export and import a translatable version of my story?
- FAQ
- How to export and import a translatable version of my content?
To export or import translatable versions of your story, you need to use the Storyblok Management API. Your block and field must have the “translatable” option enabled for the import to work.
Section titled Export Stories as XML
To export a story, you need your story ID
and the ID
of the space you want to export stories from. Then, you can make a GET
request. Also, make sure you add Authorization
to the header with your personal 0auth access token as the value.
Resource | Information |
---|---|
Endpoint | https://mapi.storyblok.com/v1/spaces/:space_id/stories/:story_id/export.xml?lang_code=language_code&export_lang=true |
Method | GET |
Header | Authorization:YOUR_0AUTH_TOKEN |
GET https://mapi.storyblok.com/v1/spaces/:space_id/stories/:story_id/export.xml?lang_code=language_code&export_lang=true
import StoryblokClient from "storyblok-js-client";
const Storyblok = new StoryblokClient({
oauthToken: "YOUR_OAUTH_TOKEN",
});
const spaceId = 134445;
const storyId = 86930141;
const langCode = "language_code";
const exportStoriesXml = async () => {
try {
const response = await Storyblok.get(`spaces/${spaceId}/stories/${storyId}/export.xml?lang_code=${langCode}&export_lang=true`);
console.log(response.data);
} catch (error) {
console.error("Error:", error);
}
};
exportStoriesXml();
Section titled Export Stories as JSON
Resource | Information |
---|---|
Endpoint | https://mapi.storyblok.com/v1/spaces/:space_id/stories/:story_id/export.json?lang_code=language_code&export_lang=true |
Method | GET |
Header | Authorization: YOUR_OAUTH_TOKEN |
GET https://mapi.storyblok.com/v1/spaces/:space_id/stories/:story_id/export.json?lang_code=language_code&export_lang=true
import StoryblokClient from "storyblok-js-client";
const Storyblok = new StoryblokClient({
oauthToken: "YOUR_OAUTH_TOKEN",
});
const spaceId = 134445;
const storyId = 86930141;
const langCode = "language_code";
const exportStories = async () => {
try {
const response = await Storyblok.get(`spaces/${spaceId}/stories/${storyId}/export.json?lang_code=${langCode}&export_lang=true`);
console.log(response.data);
} catch (error) {
console.error("Error:", error);
}
};
exportStories();
You can find your 0Auth token in your Storyblok user account dashboard. You can also see our documentation for language code.
Section titled Importing Stories
You can either import stories as XML or JSON. To do this, just like when exporting stories, you need your story ID
and the ID
of the space
, you want to import the story into. Since you’ll be updating your space, you need to make a PUT
request and add Authorization
to the header with your personal 0auth access token as the value. The body of the request should then contain the story you want to import in this format {"data": YOUR_STRINGIFIED_IMPORT_STORY}
. It's important to note that imported stories can only be in JSON or XML format.
The data you’re importing must be a string. Whether it’s in XML or JSON format.
Section titled Import Stories as XML
Resource | Information |
---|---|
Endpoint | https://mapi.storyblok.com/v1/spaces/:space_id/stories/:story_id/import.xml |
Method | PUT |
Header | Authorization: YOUR_OAUTH_TOKEN |
Body | {"data": YOUR_STRINGIFIED_IMPORT_XML"} |
import StoryblokClient from "storyblok-js-client";
const Storyblok = new StoryblokClient({
oauthToken: "YOUR_OAUTH_TOKEN",
});
const spaceId = 134445;
const storyId = 86930141;
const xml = `<?xml version="1.0" encoding="UTF-8"?>
<page text_nodes="0" filename="building-a-food-store" url="posts/building-a-food-store" id="86930141" language="default">
<name>Building a phone store</name>
<tags>
<tag id="69c9f9dd-b5e5-4859-a5ee-0bf8a1319c8e:Post:image" type="STRING">
<text>
<![CDATA[//a.storyblok.com/f/134445/1500x844/19eeaff370/eeacbea1-99a3-4a96-8ee9-980ae5f9dfe6.jpeg]]>
</text>
</tag>
<tag id="69c9f9dd-b5e5-4859-a5ee-0bf8a1319c8e:Post:intro" type="STRING">
<text>
<![CDATA[phone stores are important for mankind]]>
</text>
</tag>
<tag id="69c9f9dd-b5e5-4859-a5ee-0bf8a1319c8e:Post:title" type="STRING">
<text>
<![CDATA[Building a phone store]]>
</text>
</tag>
<tag id="69c9f9dd-b5e5-4859-a5ee-0bf8a1319c8e:Post:author" type="STRING">
<text>
<![CDATA[cd9f7534-b437-4d3f-b23d-022f464f4cf3]]>
</text>
</tag>
<tag id="69c9f9dd-b5e5-4859-a5ee-0bf8a1319c8e:Post:richtext:long_text" type="STRING">
<text>
<![CDATA[{"type":"doc","content":[{"type":"paragraph","content":[{"text":"this is a phone store ","type":"text"}]}]}]]>
</text>
</tag>
</tags>
</page>`;
const importXmlStory = async () => {
try {
const response = await Storyblok.put(`spaces/${spaceId}/stories/${storyId}/import.xml`, {
data: xml
});
console.log(response.data);
} catch (error) {
console.error("Error:", error);
}
};
importXmlStory();
Section titled Import Stories as JSON
Resource | Information |
---|---|
Endpoint | https://mapi.storyblok.com/v1/spaces/:space_id/stories/:story_id/import.json |
Method | PUT |
Header | Authorization:YOUR_MANAGEMENT_TOKEN |
Body | {"data": YOUR_STRINGIFIED_IMPORT_JSON} |
import StoryblokClient from "storyblok-js-client";
const Storyblok = new StoryblokClient({
oauthToken: "YOUR_OAUTH_TOKEN",
});
const spaceId = 134445;
const pageId = 86930141;
const authToken = "YOUR_OAUTH_TOKEN";
const json = {
"69c9f9dd-b5e5-4859-a5ee-0bf8a1319c8e:Post:author": "cd9f7534-b437-4d3f-b23d-022f464f4cf3",
"69c9f9dd-b5e5-4859-a5ee-0bf8a1319c8e:Post:image": "//a.storyblok.com/f/134445/1500x844/19eeaff370/eeacbea1-99a3-4a96-8ee9-980ae5f9dfe6.jpeg",
"69c9f9dd-b5e5-4859-a5ee-0bf8a1319c8e:Post:intro": "iphone stores are important for mankind",
"69c9f9dd-b5e5-4859-a5ee-0bf8a1319c8e:Post:richtext:long_text": '{"type":"doc","content":[{"type":"paragraph","content":[{"text":"this is an iPhone store ","type":"text"}]}]}',
"69c9f9dd-b5e5-4859-a5ee-0bf8a1319c8e:Post:title": "Building an iPhone store",
language: "default",
page: `${pageId}`,
text_nodes: 0,
url: "posts/building-an-iphone-store",
};
const importStory = async () => {
try {
const response = await Storyblok.put(`spaces/${spaceId}/stories/${pageId}/import.json`, {
data: JSON.stringify(json),
});
console.log(response.data);
} catch (error) {
console.error("Error:", error);
}
};
importStory();
An easy way to check if the story update has worked is to access the same story in the Visual Editor and reload the page.
Section titled Parameters for the specific language
To export/import your story in specific languages already added to your space, add the optional param ?lang_code=language_code
to the endpoint.
You can easily import and export translatable fields of your stories using the import translatable fields and export translatable fields apps respectively. The app is available in the Business plan or superior.