Usage
Learn how to serve personalized content without changing your application.
The integration is transparent. You fetch and render your Storyblok stories exactly as you do today, and both personalization and AB tests apply automatically to the blocks you linked to a slot.
The integration also forwards the locale from your Storyblok request to Croct, so each visitor gets personalized content for the matching locale.
Fetch and render a story
Fetch a story with the Storyblok SDK as usual and render it with your components. The integration intercepts the request and replaces any linked blocks with personalized content behind the scenes.
const {data} = await storyblokApi.get('cdn/stories/home', { version: 'published', language: 'en',});
// Render data.story.content.body with your own components.The language you pass is forwarded to Croct, so each visitor gets the personalized content for the matching locale.
What to expect
When you load a page that renders a linked block:
- Visitors not matched by any experience see the original Storyblok content.
- Visitors matched by a Personalized experience or an AB test see the personalized content in place of the block, with no extra code.
To watch it happen end to end, publish an experience targeting the connected slot and reload the page, as described in the Storyblok tutorial.