> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Leitfaden zur Headless-CMS-Integration

> Integrieren Sie Kameleoon-Feature-Flags mit einem Headless-CMS, um die Inhaltsbereitstellung pro Variation zu steuern, wobei das React-SDK als Referenzimplementierung dient.

## Schritt 1: Feature-Variationen in Kameleoon definieren

Erstellen Sie in Ihrem Kameleoon-Dashboard ein neues Feature Flag, das steuert, welche Version des Inhalts angezeigt wird. Wenn Sie beispielsweise verschiedene Versionen eines Startseiten-Abschnitts ausprobieren:

* **Name des Feature Flags:** `Homepage section`
* **Feature-Variation 1:** `section_v1`
  * **Feature-Variable 1:** `content_id = ID des Inhalts auf Version 1 Ihres CMS.`
* **Feature-Variation 2:** `section_v2`
  * **Feature-Variable 2:** `content_id = ID des Inhalts auf Version 2 Ihres CMS.`

Diese `content_id`-Werte sollten den eindeutigen Bezeichnern entsprechen, die in Ihrem Headless-CMS fuer jede Inhaltsversion verwendet werden.

<Frame>
  ![CMS-1](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/cms-intgr/cms-1.png)
</Frame>

### Schritt 2: Inhalt vom CMS abrufen und anzeigen

Verwenden Sie nun in Ihrer React-Anwendung die Methode getFeatureVariable, um die content\_id basierend auf der aktiven Variation abzurufen, und verwenden Sie sie, um den entsprechenden Inhalt aus Ihrem Headless-CMS abzurufen.

```js theme={null}
// Define the type for your CMS content
interface CMSContent {
  title: string;
  body: string;
}

function HomepageSection() {
  const [content, setContent] = useState<CMSContent | null>(null);

  useEffect(() => {
    const fetchContent = async () => {
      try {
        // Fetch the content_id for the current variation
        const content_id: string = await getFeatureVariable<string>(
          'homepage_section',
          'content_id'
        );

        // Fetch the content from your headless CMS using the content_id
        const response = await fetch(`https://your-cms.com/api/content/${content_id}`);
        const data: CMSContent = await response.json();

        // Update the state with the fetched content
        setContent(data);
      } catch (error) {
        console.error('Error fetching content:', error);
      }
    };

    fetchContent();
  }, []);

  return (
    <div>
      {/* Render the content fetched from your headless CMS */}
      {content ? (
        <div>
          <h1>{content.title}</h1>
          <p>{content.body}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default HomepageSection;
```

**Mechanismus:**

* **Abrufen der content id:** Die Methode `getFeatureVariable` ruft die `content_id` fuer die aktive Variation ab. Die `content_id` wird dann verwendet, um den entsprechenden Inhalt aus dem CMS abzurufen.

* **Fehlerbehandlung:** Ein try-catch-Block ist enthalten, um Fehler waehrend des Inhaltsabrufs zu behandeln.

* **Rendering:** Der abgerufene Inhalt wird dynamisch in Ihrer React-Komponente gerendert.

### Schritt 3: CMS-Inhalt verwalten

Stellen Sie sicher, dass jede Inhaltsvariation in Ihrem Headless-CMS mit einer eindeutigen ID verknuepft ist. Diese IDs sollten den in Kameleoon festgelegten `content_id`-Feature-Variablen entsprechen.

Wenn Benutzer die Seite laden, entscheidet Kameleoon, welche Variation ausgeliefert wird. Basierend auf der `content_id` wird der korrekte Inhalt abgerufen und angezeigt.

**Fazit:** Indem Sie diese Schritte befolgen, wird Kameleoon mithilfe des React-SDK in das Headless-CMS integriert. Diese Einrichtung ermoeglicht dynamische Experimentation und die Auslieferung verschiedener Inhaltsvariationen und verbessert die Personalisierung sowie die Effektivitaet der Benutzererfahrung.

<Frame>
  \u0001\u0001\u0001
  ![CMS-2](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/cms-intgr/cms-2.png)
</Frame>