# Get started with the Storyblok app

Install Optimize and connect your Storyblok space to Croct.

[Optimize by Croct](https://www.storyblok.com/apps/external/optimize) is a Storyblok app that brings personalization and AB testing directly into the Storyblok interface. It connects your Storyblok space to Croct and lets you link any block to a slot, so marketers can manage dynamic content without touching code.

This tutorial walks you through installing the app, configuring a block, and linking it to a slot.

> **Scale plan**
>
> This feature is available only to accounts on the Scale plan. See the [pricing page](https://croct.com/pricing) for more information.

## Prerequisites

Before you start, make sure you have:

- A [Croct account](https://app.croct.com/signup) with a workspace and application set up.
- A [Storyblok account](https://app.storyblok.com/#/signup) with a space and at least one story set up.

> **Vendor approval**
>
> Storyblok requires manual vendor approval for installing external apps. [Please reach out to us](https://croct.com/contact/support?subject=feature-request\&message=I%20need%20to%20install%20the%20Optimize%20app%20in%20my%20Storyblok%20account.%20Could%20you%20please%20provide%20me%20access?) and confirm that your email has been approved before getting started. This should only take a few minutes on our side.

## Install the app

The app is available in [Storyblok's app directory](https://www.storyblok.com/apps/external/optimize). Once installed, the onboarding will guide you through connecting your space to Croct and setting up the field plugin.

1. [Access the integration](https://app.storyblok.com/#/install/croct) and install it.

2. Follow the onboarding instructions to install the field plugin and connect your Storyblok space to Croct.

   ![App onboarding](/assets/immersion/integrations/cms/storyblok/onboarding.png)

3. Add the Storyblok integration to your project:

   ```sh
   croct init
   ```

   If you prefer to set things up manually, follow the [manual installation instructions](/reference/sdk/storyblok/manual-installation).

## Make your first block dynamic

Giving a block dynamic capabilities means adding the Optimize plugin field to it.

1. Open the **Optimize app** tab on the left menu, under **Apps**.

2. Open the **Dynamic blocks** area and find the block you want to make dynamic.

   ![Dynamic blocks](/assets/immersion/integrations/cms/storyblok/dynamic-blocks.png)

3. Toggle the block on.

## Connect your first block

With your block made dynamic, you can now connect it to a slot.

1. Open your story and find the block you want to use for dynamic content, such as your home hero section.

2. Open the block's settings and locate the Optimize field.

3. Click **+ Create** to create a new slot.

   ![Create a new slot](/assets/immersion/integrations/cms/storyblok/create-slot.png)

4. Save your changes.

5. Click the link "Connect this slot" to connect the new slot to the block. You'll be redirected to the slot page, where you'll find your new slot with the status **Missing**.

   ![Slot list](/assets/immersion/integrations/cms/storyblok/slots.png)

6. Click **Add** to complete the connection. Once done, the status changes to **Active**.

> **Unsupported field types**
>
> Rich text, table, and reference fields are not supported for dynamic personalization and AB testing. If your block contains these fields, the status will show as **Conflicting**.

## Try it out

Verify that the integration is working:

1. **Open your application**

   Load a page that renders the connected block. You should see the default Storyblok 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 personalized content**

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

Your original Storyblok content serves as the [default](/explanation/content/slot-default-content) and [fallback](/explanation/content/fallback-content) for visitors not targeted by any active experience.

![Content hierarchy](/assets/immersion/integrations/cms/storyblok/content-hierarchy.png)

## Explore

- [Storyblok demo](https://github.com/croct-tech/croct-storyblok-project): Check a demo repository at GitHub.
- [Storyblok Optimize app](/immersion/integrations/cms/storyblok/guide): Learn how to use the Optimize app for Storyblok CMS.