iframe, `<embed>` und `<object>`

Wo kein eigenes JavaScript erlaubt ist (manche CMS, Shop-Baukästen, Intranets), lässt sich die Umfrage als eigenständige Seite in einen Rahmen laden. Die Rahmenseite liegt unter

https://embed.pollyou.org/p/AbC123xyz0

AbC123xyz0 ist die öffentliche ID der Umfrage. Wo JavaScript möglich ist, ist das Script-Snippet die bessere Wahl: es passt sich dem Layout an, braucht keinen Rahmen und übernimmt Schrift und Farben der Seite.

iframe mit automatischer Höhe (empfohlen)

html

<script src="https://embed.pollyou.org/v1/iframe-resizer.js"></script>

<iframe
  src="https://embed.pollyou.org/p/AbC123xyz0"
  data-pollyou-iframe
  title="Umfrage"
  loading="lazy"
  style="width: 100%; border: 0; height: 480px"
></iframe>

data-pollyou-iframe markiert den Rahmen für iframe-resizer.js (ca. 1 KB). Das Script setzt die Höhe des Rahmens passend zum Inhalt – auch wenn er wächst, etwa wenn nach dem Abstimmen die Ergebnisse erscheinen. Ohne Script bleibt die Höhe aus style stehen.
Das Script einmal pro Seite einbinden, am besten vor den Rahmen und ohne async, damit es die ersten Höhenmeldungen nicht verpasst. Später eingefügte Rahmen werden automatisch berücksichtigt.
title beschreibt den Rahmen für Screenreader und ist Pflicht für barrierefreie Seiten.
Für feste Releases gibt es versionierte Pfade mit SRI-Hash wie bei embed.js, z. B. https://embed.pollyou.org/v1.0.0/iframe-resizer.js (Hashes in https://embed.pollyou.org/integrity.json, siehe Versionen und Integrität).

Optionen der Rahmenseite

Optionen werden als Query-Parameter an die Adresse gehängt:

Parameter	Bedeutung
`embed`	ID einer Embed-Konfiguration.
`theme`	Farbschema: `auto` (Standard), `light` oder `dark`.
`locale`	Sprache, z. B. `de` oder `en`.
`hide_title=1`	Titel der Umfrage ausblenden (wenn die Seite ihn selbst zeigt).
`transparent=1`	Transparenter Hintergrund statt der Hintergrundfarbe des Themes.
`channel=embed`	Für `<embed>`/`<object>`: Antworten zählen in der Auswertung unter dem Kanal „embed“ statt „iframe“.
`<schlüssel>`	Wert eines versteckten Feldes mit diesem Schlüssel, z. B. `ref=newsletter` (wie beim Direktlink).

Overrides der Embed-Konfiguration haben Vorrang vor den Parametern.

Wo darf die Seite eingebunden werden?

Die Rahmenseite sendet Content-Security-Policy: frame-ancestors …:

ohne Einschränkung frame-ancestors * – überall einbettbar,
mit erlaubten Origins (der Konfiguration bzw. aller Konfigurationen der Umfrage, siehe Erlaubte Origins) z. B. frame-ancestors 'self' https://shop.example.com https://*.example.org – andere Seiten zeigt der Browser nicht an.

Ereignisse

iframe-resizer.js gibt die Ereignisse der Umfrage als CustomEvents am <iframe>-Element weiter – mit denselben Namen wie beim Script-Snippet (pollyou:ready, pollyou:start, pollyou:answer, pollyou:complete, …). Sie steigen im DOM auf; detail enthält zusätzlich die publicId:

document.querySelector('[data-pollyou-iframe]').addEventListener('pollyou:complete', (event) => {
  console.log('Abgestimmt:', event.detail.responseId)
})

Eigene Auswertung der Nachrichten

Die Rahmenseite meldet ihre Höhe und alle pollyou:*-Ereignisse per postMessage an das umgebende Fenster:

{ source: 'pollyou', type: 'resize', publicId: 'AbC123xyz0', height: 512 }
{ source: 'pollyou', type: 'event', publicId: 'AbC123xyz0', event: 'pollyou:complete', detail: { … } }

Statt iframe-resizer.js können Sie die Nachrichten auch selbst auswerten – prüfen Sie dabei immer event.origin:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://embed.pollyou.org' || event.data?.source !== 'pollyou') return
  if (event.data.type === 'resize') {
    document.querySelector(`iframe[src*="${event.data.publicId}"]`).style.height =
      `${event.data.height}px`
  }
})

Sicherheit

iframe-resizer.js verarbeitet nur Nachrichten, die

aus dem Fenster eines Rahmens mit data-pollyou-iframe stammen und
von genau der Origin kommen, die im src dieses Rahmens steht.

Nachrichten anderer Rahmen oder Fenster werden ignoriert, Höhen sind auf 20 000 px begrenzt. Welche Websites die Rahmenseite überhaupt einbetten dürfen, legen die erlaubten Domains der Einbettungs-Konfiguration fest (Content-Security-Policy: frame-ancestors).

`<embed>` und `<object>`

Für Systeme, die nur diese Tags erlauben (z. B. ältere CMS-Editoren):

html

<embed
  src="https://embed.pollyou.org/p/AbC123xyz0?channel=embed"
  type="text/html"
  width="100%"
  height="520"
/>

<object
  data="https://embed.pollyou.org/p/AbC123xyz0?channel=embed"
  type="text/html"
  width="100%"
  height="520"
>
  <a href="https://app.pollyou.org/s/AbC123xyz0">Zur Umfrage</a>
</object>

Einschränkungen gegenüber dem iframe:

Keine automatische Höhe: iframe-resizer.js arbeitet nur mit <iframe>. Die Höhe muss fest gewählt werden – großzügig genug für Frage und Ergebnisse, sonst erscheint eine Scrollleiste im Rahmen.
Keine Ereignisse auf der Host-Seite.
Kein title-Attribut für Screenreader bei <embed>; <object> kann einen Fallback-Inhalt (z. B. einen Link zum Direktlink) enthalten, der angezeigt wird, wenn der Inhalt nicht geladen werden kann.

iframe, <embed> und <object> ​

iframe mit automatischer Höhe (empfohlen) ​

Optionen der Rahmenseite ​

Wo darf die Seite eingebunden werden? ​

Ereignisse ​

Eigene Auswertung der Nachrichten ​

Sicherheit ​

<embed> und <object> ​