# Integrate Strapi with Croct

Add personalization and AB testing to your Strapi-powered site.

This integration connects your [Strapi](https://strapi.io) 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](https://strapi.io/blog/how-to-create-pages-on-the-fly-with-dynamic-zone). 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](/explanation/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](/explanation/content/fallback-content).

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.

> **No content restructuring**
>
> 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](https://app.croct.com/signup) with a workspace and application set up.
- A [Strapi project](https://strapi.io) with at least one content type and component set up.

## Set up the integration

If you are starting from scratch, [this demo](https://github.com/croct-tech/croct-strapi-project) 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.

**Command to initialize your project**

```sh
croct init
```

If you prefer to set things up by hand, choose your SDK and follow the manual instructions.

## Create components and slots

A Croct [component](/explanation/component) defines the content structure that mirrors your Sanity schema, and the [slot](/explanation/slot) is the placeholder your application fetches content from. Follow [this tutorial](/immersion/tutorials/get-started/content-management) to create both for each component you want to make dynamic.

> **Matching structure required**
>
> 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](/immersion/tutorials/get-started/content-management) 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](https://github.com/strapi/LaunchPad/blob/main/next/app/%5Blocale%5D/\(marketing\)/page.tsx) 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:

1. **Open your application**

   Load a page that renders the connected component. You should see the default content.

2. **Launch a personalized experience**

   Create and publish a [personalized experience](/immersion/tutorials/get-started/slot-personalization) or an [AB test](/immersion/tutorials/get-started/ab-testing) targeting the connected slot.

3. **Confirm dynamic content**

   Reload the page as a visitor who matches your audience. You should see the dynamic content instead of the default.

## Explore

- [Experiences](/explanation/experience/introduction): Discover what an experience is and how it works.
- [Croct Strapi demo](https://github.com/croct-tech/croct-strapi-project): Check out the Croct Strapi demo project on GitHub.