> ## 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.

# Implementación con SvelteKit

> Integre Kameleoon con protección anti-flicker y ejecute el script engine.js después de la hidratación de SvelteKit.

# Implementación con SvelteKit

Integre **Kameleoon Web Experimentation** con **protección anti-flicker** y ejecute el script `engine.js` **después de la hidratación de SvelteKit**. Esta configuración garantiza un rendimiento óptimo, estabilidad visual y compatibilidad con el ciclo de vida de renderizado de SvelteKit.

### Acceda a la integración SvelteKit lista para producción

Acceda al repositorio listo para producción aquí:
[https://github.com/Kameleoon/setup-engine-sveltekit](https://github.com/Kameleoon/setup-engine-sveltekit)

Antes de empezar, **sustituya el valor del sitecode** en [`src/lib/integrations/Kameleoon/sitecode.ts`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/lib/integrations/Kameleoon/sitecode.ts).

## Dominio del script

El dominio de su script de Kameleoon puede diferir entre proyectos. En función de cuándo haya creado su proyecto, sus scripts pueden residir en `kameleoon.eu` o en `kameleoon.io`. Utilice siempre el dominio que se muestra para su proyecto en la aplicación Kameleoon.

***

## Visión general

1. **Precargue el motor de Kameleoon**: Asegúrese de que el navegador descargue y almacene en caché el motor cuanto antes.
2. **Aplique CSS anti-flicker**: Oculte el contenido hasta que el motor esté listo para evitar saltos de diseño.
3. **Ejecute el motor después de la hidratación**: Ejecute el script tras la hidratación de SvelteKit para evitar discrepancias.

***

## Componentes

La integración utiliza **dos componentes** para garantizar una carga fluida y evitar el flickering durante la hidratación.

***

### 1. Componente del servidor

El componente:

* Inyecta CSS anti-flicker durante el SSR para evitar parpadeos en la UI.
* Precarga el archivo `engine.js` para que la descarga comience lo antes posible.

```tsx theme={null}
<script lang="ts">
  import { SITECODE_SRC } from './sitecode';
</script>

<svelte:head>
  <link
    rel="preload"
    href={SITECODE_SRC}
    as="script"
    fetchpriority="high"
  />

  <style id="kameleoonLoadingStyleSheet">
    html::after {
      content: '';
      position: fixed;
      inset: 0;
      background: #fff;
      z-index: 2147483647;
    }
  </style>
</svelte:head>
```

Consulte [`KameleoonHead.svelte`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/lib/integrations/Kameleoon/KameleoonHead.svelte) en GitHub.

***

### 2. Componente del cliente

El componente:

* Elimina los estilos anti-flicker después de la hidratación.
* Carga dinámicamente el script `engine.js` de Kameleoon.
* Garantiza que el script se cargue sin bloquear el renderizado.

```tsx theme={null}
<script lang="ts">
  import { onMount } from 'svelte';
  import { SITECODE_SRC } from './sitecode';

  // custom value
  const kameleoonLoadingTimeout = 500;

  function removeAntiflickerStyles(): void {
    window.kameleoonQueue = window.kameleoonQueue || [];
    window.kameleoonStartLoadTime = Date.now();

    window.kameleoonDisplayPage = (fromEngine?: boolean): void => {
      if (!fromEngine) {
        window.kameleoonTimeout = true;
      }
      document
        .getElementById('kameleoonLoadingStyleSheet')
        ?.remove();
    };

    window.kameleoonDisplayPageTimeOut = setTimeout(
      window.kameleoonDisplayPage,
      kameleoonLoadingTimeout
    );
  }

  function loadEngine(): void {
    if (document.getElementById('kameleoon-engine')) return;

    const script = document.createElement('script');
    script.src = SITECODE_SRC;
    script.async = true;
    script.id = 'kameleoon-engine';
    document.head.appendChild(script);
  }

  
  // Execute Kameleoon after hydration
  onMount(() => {
    removeAntiflickerStyles();
    loadEngine();
  });
</script>
```

Consulte [`KameleoonHydrationReady.svelte`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/lib/integrations/Kameleoon/KameleoonHydrationReady.svelte) en GitHub.

<Note>
  El timeout anti-flicker predeterminado es de `750 ms`. Ajuste `kameleoonLoadingTimeout` si es necesario.
</Note>

***

## Uso en RootLayout

Combine ambos componentes en su layout:

```tsx theme={null}
<script lang="ts">
  import KameleoonHead from '$lib/integrations/Kameleoon/KameleoonHead.svelte';
  import KameleoonHydrationReady from '$lib/integrations/Kameleoon/KameleoonHydrationReady.svelte';
</script>

<!-- SSR head injection -->
<KameleoonHead />

<!-- Optional: other head tags -->
<svelte:head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
</svelte:head>

<!-- Client bootstrap after hydration -->
<KameleoonHydrationReady />

<slot />
```

Consulte [`layout.svelte`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/routes/%2Blayout.svelte) en GitHub.

***

## Conclusiones clave

* Proteja contra el flickering en SSR.
* Utilice una ejecución de script consciente de la hidratación.
* Cargue el motor de forma asíncrona.
* Utilice un timeout de respaldo para mayor fiabilidad.
* Evite scripts bloqueantes.
* Compatible con layouts de SvelteKit, SSR y enrutamiento del lado del cliente.

Con esta configuración, su aplicación SvelteKit cargará Kameleoon de manera eficiente y evitará problemas relacionados con la hidratación.