Aller au contenu principal

Intégration par iframe

L'intégration par iframe est la méthode la plus simple pour intégrer les fonctionnalités Wast-o dans votre application. Elle nécessite peu de code et permet une mise en place rapide.

Vue d'ensemble​

L'intégration par iframe permet d'embarquer les composants Wast-o directement dans votre page web via une iframe. Cette méthode est idéale pour :

  • Intégrations rapides
  • Prototypes
  • Sites web avec contraintes de sécurité
  • Applications nécessitant une isolation

Intégration du calendrier​

URL de base​

L'URL de base pour le calendrier est :

https://public.wast-o.org/calendar?cityId={cityId}

Paramètres​

  • cityId (requis) : Identifiant unique de la ville (UUID)
  • placeId (optionnel) : Identifiant du lieu de collecte spécifique
  • lang (optionnel) : Code langue (fr, en). Par défaut: fr
  • theme (optionnel) : Thème (light, dark). Par défaut: light

Exemple basique​

<!DOCTYPE html>
<html>
<head>
  <title>Calendrier de collecte Wast-o</title>
</head>
<body>
  <h1>Calendrier de collecte</h1>
  
  <iframe
    src="https://public.wast-o.org/calendar?cityId=city-uuid&lang=fr"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
  ></iframe>
</body>
</html>

Exemple avec paramètres avancés​

<iframe
  src="https://public.wast-o.org/calendar?cityId=city-uuid&placeId=place-uuid&lang=fr&theme=light"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  style="border: 1px solid #e0e0e0; border-radius: 8px;"
></iframe>

Communication avec l'iframe (postMessage)​

Vous pouvez communiquer avec l'iframe pour changer le mois affiché ou récupérer des événements :

// Écouter les messages de l'iframe
window.addEventListener('message', (event) => {
  // Vérifier l'origine pour la sécurité
  if (event.origin !== 'https://public.wast-o.org') {
    return;
  }
  
  // Traiter les messages
  if (event.data.type === 'calendar:monthChanged') {
    console.log('Mois changé:', event.data.month);
  }
  
  if (event.data.type === 'calendar:daySelected') {
    console.log('Jour sélectionné:', event.data.date);
  }
});

// Envoyer des messages à l'iframe
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage({
  type: 'calendar:setMonth',
  month: 5, // Juin (0-indexed)
  year: 2024
}, 'https://public.wast-o.org');

Intégration des challenges​

URL de base​

L'URL de base pour les challenges est :

https://public.wast-o.org/challenges?cityId={cityId}

Paramètres​

  • cityId (requis) : Identifiant unique de la ville (UUID)
  • challengeId (optionnel) : Identifiant d'un challenge spécifique
  • lang (optionnel) : Code langue (fr, en). Par défaut: fr
  • theme (optionnel) : Thème (light, dark). Par défaut: light

Exemple basique​

<!DOCTYPE html>
<html>
<head>
  <title>Challenges Wast-o</title>
</head>
<body>
  <h1>Défis de tri</h1>
  
  <iframe
    src="https://public.wast-o.org/challenges?cityId=city-uuid&lang=fr"
    width="100%"
    height="800"
    frameborder="0"
    allowfullscreen
  ></iframe>
</body>
</html>

Communication avec l'iframe challenges​

// Écouter les événements des challenges
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://public.wast-o.org') {
    return;
  }
  
  if (event.data.type === 'challenge:completed') {
    console.log('Challenge complété:', event.data.challengeId);
    console.log('Score:', event.data.score);
  }
  
  if (event.data.type === 'challenge:progress') {
    console.log('Progression:', event.data.progress);
  }
});

Intégration du quiz​

URL de base​

L'URL de base pour le quiz est :

https://public.wast-o.org/quiz?cityId={cityId}&challengeId={challengeId}

Paramètres​

  • cityId (requis) : Identifiant unique de la ville (UUID)
  • challengeId (requis) : Identifiant du challenge contenant le quiz
  • serieId (optionnel) : Identifiant de la série de questions
  • lang (optionnel) : Code langue (fr, en). Par défaut: fr

Exemple​

<iframe
  src="https://public.wast-o.org/quiz?cityId=city-uuid&challengeId=challenge-uuid&lang=fr"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Responsive Design​

Pour rendre l'iframe responsive, utilisez cette technique :

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://public.wast-o.org/calendar?cityId=city-uuid"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Ou avec CSS moderne :

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* Ratio 4:3 */
  height: 0;
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
<div class="iframe-container">
  <iframe
    src="https://public.wast-o.org/calendar?cityId=city-uuid"
    allowfullscreen
  ></iframe>
</div>

Sécurité et Content Security Policy (CSP)​

Si votre site utilise CSP, vous devrez autoriser l'iframe :

<meta http-equiv="Content-Security-Policy" 
      content="frame-src https://public.wast-o.org;">

Ou dans votre configuration serveur :

Content-Security-Policy: frame-src https://public.wast-o.org;

Gestion des erreurs​

L'iframe peut renvoyer des erreurs via postMessage :

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://public.wast-o.org') {
    return;
  }
  
  if (event.data.type === 'error') {
    console.error('Erreur dans l\'iframe:', event.data.message);
    // Afficher un message à l'utilisateur
  }
  
  if (event.data.type === 'loading') {
    console.log('Chargement...');
  }
  
  if (event.data.type === 'loaded') {
    console.log('Contenu chargé');
  }
});

Exemple complet​

Voici un exemple complet d'intégration avec gestion d'erreurs et communication :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Intégration Wast-o</title>
  <style>
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .iframe-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 75%;
      height: 0;
      overflow: hidden;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      margin-top: 20px;
    }
    
    .iframe-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    
    .error-message {
      display: none;
      padding: 20px;
      background-color: #ffebee;
      color: #c62828;
      border-radius: 8px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Calendrier de collecte Wast-o</h1>
    
    <div class="iframe-wrapper">
      <iframe
        id="wasto-calendar"
        src="https://public.wast-o.org/calendar?cityId=city-uuid&lang=fr"
        allowfullscreen
      ></iframe>
    </div>
    
    <div id="error-message" class="error-message"></div>
  </div>
  
  <script>
    const iframe = document.getElementById('wasto-calendar');
    const errorDiv = document.getElementById('error-message');
    
    // Gestion des erreurs
    window.addEventListener('message', (event) => {
      if (event.origin !== 'https://public.wast-o.org') {
        return;
      }
      
      if (event.data.type === 'error') {
        errorDiv.textContent = `Erreur: ${event.data.message}`;
        errorDiv.style.display = 'block';
      } else if (event.data.type === 'loaded') {
        errorDiv.style.display = 'none';
      }
    });
    
    // Gestion des erreurs de chargement de l'iframe
    iframe.addEventListener('error', () => {
      errorDiv.textContent = 'Impossible de charger le calendrier. Veuillez réessayer plus tard.';
      errorDiv.style.display = 'block';
    });
  </script>
</body>
</html>

Bonnes pratiques​

  1. Toujours vérifier l'origine : Vérifiez toujours event.origin lors de la réception de messages
  2. Gérer les erreurs : Implémentez une gestion d'erreurs robuste
  3. Responsive : Assurez-vous que l'iframe s'adapte à différentes tailles d'écran
  4. Accessibilité : Ajoutez des attributs title et aria-label à l'iframe
  5. Performance : Utilisez loading="lazy" pour les iframes non visibles immédiatement

Limitations​

  • Les iframes peuvent être bloquées par certains navigateurs ou extensions
  • La personnalisation est limitée par les contraintes de sécurité des iframes
  • Les performances peuvent être inférieures à une intégration native
  • Certaines fonctionnalités peuvent être limitées par les politiques de sécurité

Pour une intégration plus avancée, consultez la documentation des composants React, Vue ou Svelte.