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

# Implementation avec SvelteKit

> Integrez Kameleoon avec une protection anti-flicker et executez le script engine.js apres l'hydratation SvelteKit.

# Implémentation avec SvelteKit

Intégrez **Kameleoon Web Experimentation** avec une **protection anti-flicker** et exécutez le script `engine.js` **après l'hydratation SvelteKit**. Cette configuration garantit des performances optimales, une stabilité visuelle et la compatibilité avec le cycle de vie de rendu de SvelteKit.

### Accéder à l'intégration SvelteKit prête pour la production

Accédez au dépôt prêt pour la production ici :
[https://github.com/Kameleoon/setup-engine-sveltekit](https://github.com/Kameleoon/setup-engine-sveltekit)

Avant de commencer, **remplacez la valeur sitecode** dans [`src/lib/integrations/Kameleoon/sitecode.ts`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/lib/integrations/Kameleoon/sitecode.ts).

## Domaine du script

Le domaine de votre script Kameleoon peut différer entre les projets. Selon la date de création de votre projet, vos scripts peuvent résider sur `kameleoon.eu` ou `kameleoon.io`. Utilisez toujours le domaine affiché pour votre projet dans l'application Kameleoon.

***

## Vue d'ensemble

1. **Préchargez le moteur Kameleoon** : Assurez-vous que le navigateur télécharge et met en cache le moteur tôt.
2. **Appliquez le CSS anti-flicker** : Masquez le contenu jusqu'à ce que le moteur soit prêt afin d'éviter les décalages de mise en page.
3. **Exécutez le moteur après l'hydratation** : Exécutez le script après l'hydratation SvelteKit pour éviter les désynchronisations.

***

## Composants

L'intégration utilise **deux composants** pour assurer un chargement fluide et empêcher le clignotement pendant l'hydratation.

***

### 1. Composant serveur

Le composant :

* Injecte le CSS anti-flicker pendant le SSR pour empêcher les flashs d'interface.
* Précharge le fichier `engine.js` afin que le téléchargement commence dès que possible.

```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>
```

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

***

### 2. Composant client

Le composant :

* Supprime les styles anti-flicker après l'hydratation.
* Charge dynamiquement le script `engine.js` de Kameleoon.
* Garantit que le script se charge sans bloquer le rendu.

```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>
```

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

<Note>
  Le timeout anti-flicker par défaut est de `750 ms`. Ajustez `kameleoonLoadingTimeout` si nécessaire.
</Note>

***

## Utilisation dans RootLayout

Combinez les deux composants dans votre 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 />
```

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

***

## Points clés

* Protéger contre le clignotement en SSR.
* Utiliser une exécution de script consciente de l'hydratation.
* Charger le moteur de manière asynchrone.
* Utiliser un timeout de secours pour la fiabilité.
* Éviter les scripts bloquants.
* Prendre en charge les layouts SvelteKit, le SSR et le routage côté client.

Avec cette configuration, votre application SvelteKit charge Kameleoon efficacement et évite les problèmes liés à l'hydratation.