> ## 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.
# Guía de integración con CMS headless
> Integre los feature flags de Kameleoon con un CMS headless para controlar la entrega de contenido por variación, utilizando el React SDK como implementación de referencia.
## Paso 1: Definir las variaciones de la funcionalidad en Kameleoon
En su dashboard de Kameleoon, cree un nuevo feature flag que controle qué versión del contenido se muestra. Por ejemplo, si está experimentando con diferentes versiones de una sección de la página de inicio:
* **Nombre del feature flag:** `Homepage section`
* **Variación 1 de la funcionalidad:** `section_v1`
* **Variable 1:** `content_id = ID del contenido en la versión 1 de su CMS.`
* **Variación 2 de la funcionalidad:** `section_v2`
* **Variable 2:** `content_id = ID del contenido en la versión 2 de su CMS.`
Estos valores de `content_id` deben corresponderse con los identificadores únicos utilizados en su CMS headless para cada versión del contenido.
### Paso 2: Obtener y mostrar el contenido del CMS
Ahora, en su aplicación React, utilice el método getFeatureVariable para recuperar el content\_id en función de la variación activa y úselo para obtener el contenido correspondiente de su CMS headless.
```js theme={null}
// Define the type for your CMS content
interface CMSContent {
title: string;
body: string;
}
function HomepageSection() {
const [content, setContent] = useState(null);
useEffect(() => {
const fetchContent = async () => {
try {
// Fetch the content_id for the current variation
const content_id: string = await getFeatureVariable(
'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 (
{/* Render the content fetched from your headless CMS */}
{content ? (
{content.title}
{content.body}
) : (
Loading...
)}
);
}
export default HomepageSection;
```
**Mecanismo:**
* **Obtención del content id:** el método `getFeatureVariable` recupera el `content_id` para la variación activa. El `content_id` se utiliza después para obtener el contenido adecuado del CMS.
* **Gestión de errores:** se incluye un bloque try-catch para gestionar cualquier error durante el proceso de obtención del contenido.
* **Renderizado:** el contenido obtenido se renderiza dinámicamente en su componente de React.
### Paso 3: Gestionar el contenido del CMS
Asegúrese de que cada variación de contenido en su CMS headless tenga un ID único asociado. Estos IDs deben coincidir con las variables `content_id` configuradas en Kameleoon.
Cuando los usuarios cargan la página, Kameleoon decide qué variación servir. En función del `content_id`, se recupera y muestra el contenido correcto.
**Conclusión:** siguiendo estos pasos, Kameleoon queda integrado con el CMS headless usando el React SDK. Esta configuración permite la experimentación dinámica y la entrega de diferentes variaciones de contenido, mejorando la personalización y la eficacia de la experiencia del usuario.
