Integrate Strapi with Croct
Add personalization and AB testing to your Strapi-powered site.
This integration connects your Strapi project to Croct. Strapi keeps managing your static content, while Croct renders dynamic content on top of it, so you can run AB tests and personalize experiences without migrating your CMS or restructuring your content types.
How it works
The integration builds on Strapi’s dynamic zones. A dynamic zone is a field that lets editors combine and arrange reusable components to build a page. Each of those components is a natural unit for dynamic content, so you map the ones you want to make dynamic to a Croct slot.
A single Croct slot holds a map from Strapi dynamic zone components to Croct slots. When rendering a page, each dynamic zone component with a mapping gets its content from Croct, using the original Strapi content as fallback.
When an experience targets the visitor, Croct returns the dynamic variant. If the request fails, the component renders your original Strapi content. That makes the integration additive: pages keep working exactly as they do today until you launch your first experience.
Your content types, dynamic zones, and editing workflow stay exactly as they are. Croct reads nothing from Strapi and writes nothing back to it, so you can adopt it one component at a time and roll back by removing a single fetchContent call.
Prerequisites
Before you start, make sure you have:
- A Croct account with a workspace and application set up.
- A Strapi project with at least one content type and component set up.
Set up the integration
If you are starting from scratch, this demo gives you an example of a working project.
From your project, run the CLI. It detects your setup, installs the SDK, and wires the provider and middleware for you.
npx croct@latest initIf you prefer to set things up by hand, choose your SDK and follow the manual instructions.
Create components and slots
A Croct component defines the content structure that mirrors your Sanity schema, and the slot is the placeholder your application fetches content from. Follow this tutorial to create both for each component you want to make dynamic.
The Croct component must mirror your Strapi component’s structure, using the same attribute names, so that dynamic content and your Strapi content are interchangeable in the same component.
Map your dynamic zones
A single Croct slot holds a map from Strapi dynamic zone components to Croct slots. Follow the same tutorial to create your dynamic zone component using the following attributes:
| Attribute | Description | Type | Required |
|---|---|---|---|
| map | The map of dynamic zones to slots. | List of structure | Yes |
| map[*].component | The ID of the component as defined in Strapi. | Plain text | Yes |
| map[*].slot | The ID of the slot as defined in Croct. | Plain text | Yes |
For the component and slot attributes, select the Not empty option and use the pattern ^[a-z0-9_-]+$.
Then, create a slot for each page you want to connect to Croct. For the home page, for example, you can create the slot home-page-dynamic-zones.
Finally, follow this example to implement your dynamic zone mapping in the source code.
Verify the integration
Once the SDK is running, confirm that dynamic content reaches your site:
- Open your application
Load a page that renders the connected component. You should see the default content.
- Launch a personalized experience
Create and publish a personalized experience or an AB test targeting the connected slot.
- Confirm dynamic content
Reload the page as a visitor who matches your audience. You should see the dynamic content instead of the default.