Intégration par iframe

L’iframe est le moyen le plus simple d’embarquer Wast'O sur le site d’une collectivité : un extrait HTML, pas de dépendance, mises à jour automatiques.

Point d’entrée unique

Tous les modules publics s’embarquent ainsi :

https://public-web.wast-o.com/?page={page}&embed=1&cityId={cityId}

embed=1 masque le header et le chatbot pour un rendu adapté à une page tierce.

Pages

page	Contenu
calendrier	Calendrier de collecte
info	Consignes / info-tri
centres-de-tri	Carte des centres de tri
challenges	Défis de tri
calendrier-pdf	Recherche d’adresse → secteur → PDF calendrier
assistant	FAB Wast'O Agent (chat citoyen) — aliases chat, agent

Paramètres

Paramètre	Requis	Description
page	oui	Module à afficher (voir tableau)
embed	recommandé	1 pour le mode embarqué
cityId	oui	Identifiant de la commune (UUID)
placeId	non	Secteur de collecte (calendrier)
cityGroupId	non	Élargit la recherche d’adresse au groupement (calendrier-pdf)
accentColor	non	Couleur d’accent, ex. #0f766e (calendrier-pdf, assistant)
placeholder	non	Texte du champ de recherche (calendrier-pdf)
year	non	Année du calendrier PDF
preview	non	Aperçu : below (défaut), side (à côté), none
previewHeight	non	Hauteur de l’aperçu en px (sinon : planche entière)
previewWidth	non	Largeur de l’aperçu en px (sinon : 100% du widget)

Les chemins /calendrier, /info, /centres-de-tri et /challenges existent aussi, avec les mêmes query params. Préférez ?page= pour un contrat unique.

Routes à ne pas utiliser

• /calendar n’existe pas (utilisez page=calendrier)
• /quiz n’est pas une page iframe (le quiz s’ouvre depuis page=challenges ou via le composant React Quiz)

Exemple — calendrier

<iframe
  src="https://public-web.wast-o.com/?page=calendrier&embed=1&cityId=city-uuid&placeId=place-uuid"
  width="100%"
  height="600"
  style="border: 0; border-radius: 16px"
  loading="lazy"
  title="Calendrier de collecte Wast'O"
></iframe>

Exemple — info-tri

<iframe
  src="https://public-web.wast-o.com/?page=info&embed=1&cityId=city-uuid"
  width="100%"
  height="720"
  style="border: 0; border-radius: 16px"
  loading="lazy"
  title="Informations de tri Wast'O"
></iframe>

Exemple — centres de tri

<iframe
  src="https://public-web.wast-o.com/?page=centres-de-tri&embed=1&cityId=city-uuid"
  width="100%"
  height="760"
  style="border: 0; border-radius: 16px"
  loading="lazy"
  title="Centres de tri Wast'O"
></iframe>

Exemple — challenges

<iframe
  src="https://public-web.wast-o.com/?page=challenges&embed=1&cityId=city-uuid"
  width="100%"
  height="800"
  style="border: 0; border-radius: 16px"
  loading="lazy"
  title="Défis de tri Wast'O"
></iframe>

Exemple — recherche d’adresse → PDF

Le citoyen saisit une rue, choisit son secteur, puis prévisualise et télécharge le PDF publié depuis la console.

Pour la personne qui maintient le site

Coller ce bloc dans la page (WordPress, Drupal, SPIP…). Ne modifier que les lignes data-….

<!-- Calendrier de collecte Wast'O : changez uniquement les valeurs ci-dessous -->
<div
  data-wasto="calendrier-pdf"
  data-commune="VOTRE_CITY_ID"
  data-couleur="#0f766e"
  data-apercu="dessous"
  data-hauteur-apercu="520"
  data-largeur="960"
  data-position="centre"
></div>
<script src="https://public-web.wast-o.com/widget.js" async></script>

Ligne	Valeurs possibles
data-commune	Identifiant fourni par Wast'O (ne pas inventer)
data-couleur	Couleur du titre et du bouton, ex. #0f766e
data-apercu	dessous · cote (à côté) · aucun
data-hauteur-apercu	Hauteur en pixels, ou auto pour la planche entière
data-largeur	Largeur du widget, ex. 960 ou 100%
data-position	gauche · centre · droite

Optionnel : data-largeur-apercu="720", data-placeholder="Votre rue", data-annee="2026".

Option avancée — iframe seule

<iframe
  src="https://public-web.wast-o.com/?page=calendrier-pdf&embed=1&cityId=VOTRE_CITY_ID&accentColor=%230f766e&preview=below&previewHeight=520"
  style="width:100%;height:980px;border:0;border-radius:16px;"
  loading="lazy"
  title="Calendrier de collecte"
></iframe>

Équivalent React : CalendarPdfEmbed — voir Composants React.

Exemple — Wast'O Agent (chat citoyen)

Même pattern que le calendrier PDF : un <div data-wasto> + widget.js. Le script monte un FAB flottant (bas-droite) sans bloquer le reste de la page.

Pour la personne qui maintient le site

<!-- Wast'O Agent : changez uniquement les valeurs ci-dessous -->
<div
  data-wasto="assistant"
  data-commune="VOTRE_CITY_ID"
  data-couleur="#2E7D32"
></div>
<script src="https://public-web.wast-o.com/widget.js" async></script>

Ligne	Valeurs possibles
data-commune	Identifiant fourni par Wast'O (ne pas inventer)
data-couleur	Couleur du FAB et de l’en-tête, ex. #2E7D32

Optionnel : data-secteur / data-place-id pour contextualiser le chat sur un secteur.

Dans la console : Assistant IA → Installation site web (/support/widget) — couleur + snippet + aperçu.

Option avancée — iframe seule

<iframe
  src="https://public-web.wast-o.com/?page=assistant&embed=1&cityId=VOTRE_CITY_ID&accentColor=%232E7D32"
  style="position:fixed;bottom:0;right:0;width:88px;height:88px;border:0;z-index:2147483000;background:transparent;"
  title="Wast'O Agent"
  allow="clipboard-write"
></iframe>

L’iframe envoie un postMessage { source: 'wasto', type: 'wasto:assistant-resize', width, height } pour s’agrandir à l’ouverture. Équivalent React : AssistantChatEmbed.

Composants prêts à l’emploi

Au lieu de coller l’iframe à la main :

• @wasto/react-components : PublicWebEmbed, RecyclingInfoEmbed, RecyclingCentersEmbed, CalendarPdfEmbed, AssistantChatEmbed
• @wasto/vue-components / @wasto/svelte-components : PublicWebEmbed

import {
  PublicWebEmbed,
  RecyclingInfoEmbed,
  RecyclingCentersEmbed,
  CalendarPdfEmbed,
  AssistantChatEmbed,
} from '@wasto/react-components';

<RecyclingInfoEmbed cityId="city-uuid" />
<RecyclingCentersEmbed cityId="city-uuid" />
<PublicWebEmbed page="calendrier" cityId="city-uuid" placeId="place-uuid" />
<CalendarPdfEmbed cityId="city-uuid" accentColor="#0f766e" />
<AssistantChatEmbed cityId="city-uuid" accentColor="#2E7D32" />

La base par défaut documentée est https://public-web.wast-o.com. Surcharge possible via publicWebBaseUrl.

Responsive

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden; border-radius: 16px;">
  <iframe
    src="https://public-web.wast-o.com/?page=calendrier&embed=1&cityId=city-uuid"
    title="Calendrier de collecte Wast'O"
    loading="lazy"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
  ></iframe>
</div>

Content Security Policy

Autorisez l’origine du site public :

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

Content-Security-Policy: frame-src https://public-web.wast-o.com; script-src https://public-web.wast-o.com;

Bonnes pratiques

1. Toujours renseigner title (accessibilité)
2. Utiliser loading="lazy" si l’iframe n’est pas au-dessus de la ligne de flottaison
3. Passer cityId (et placeId pour un secteur précis) pour éviter un sélecteur de commune dans l’embed
4. Tester le rendu mobile : hauteur fixe trop petite = scroll interne

L’iframe PDF envoie un postMessage { source: 'wasto', type: 'wasto:embed-resize', height } pour ajuster sa hauteur. Les composants React / Vue / Svelte l’écoutent automatiquement (autoResize). Pour le calendrier interactif ou les défis, utilisez les composants React (callbacks) ou l’API publique.