Kreativsimulator per iframe im Vermarkter-Portal einbinden
Veröffentlicht · 4 Min. Lesezeit
Wenn ein Vermarkter beschließt, eine Motiv-Vorschau ins eigene Portal zu holen, landet die Aufgabe meist im Web-Team. Dort wird sie oft wie ein Projekt geplant: Ticket, Schätzung, Sprint. Für den ersten Schritt ist das zu groß gedacht.
Ein Kreativsimulator lässt sich per iframe einbinden. Der Kern ist ein einziges HTML-Tag. Was darüber hinaus Zeit kostet, sind vor allem Entscheidungen. Wir gehen die Schritte in der Reihenfolge durch, in der sie in der Praxis anfallen. Zu jedem steht, wie Sie ihn in einer halben Minute prüfen.
1. Die Domain freischalten
Ein Simulator darf nicht auf jeder beliebigen Website auftauchen. Dafür sorgt der Browser selbst.
Der Header Content-Security-Policy mit der Direktive frame-ancestors legt fest, welche Seiten
eine Seite einbetten dürfen. MDN beschreibt sie so: Sie „specifies valid parents that may embed a
page“. Das ältere X-Frame-Options: ALLOW-FROM ist laut MDN veraltet, moderne Browser ignorieren
es.
Für Sie heißt das: Jede Domain, auf der der Simulator erscheinen soll, muss auf der Liste stehen. Wer Zugang zu VirtualCampaign hat, trägt sie unter Einstellungen → Kreativsimulator selbst ein, eine Adresse pro Zeile, Wildcards sind möglich. Die Änderung greift nach spätestens einer Minute. Alle anderen schicken uns die Domains.
Test in 30 Sekunden: Bleibt der iframe weiß, öffnen Sie die Browser-Konsole (F12). Steht dort
„Refused to frame“ mit „frame-ancestors“, fehlt die Domain auf der Liste. Prüfen Sie Protokoll und
Subdomain: https://www. und https:// ohne www sind zwei Einträge.
2. Das iframe-Tag einsetzen
Der eigentliche Einbau ist ein Tag mit vier Attributen, die alle einen Zweck haben. title gibt
dem Rahmen einen Namen. Laut MDN nutzen Menschen mit Screenreader das title-Attribut, um den
Inhalt eines iframe zu benennen. loading="lazy" lädt den Rahmen erst, wenn er in die Nähe des
sichtbaren Bereichs kommt. allow="fullscreen" erlaubt den Vollbildmodus.
Einen API-Key im Browser brauchen Sie nicht. Die Anmeldung gegenüber der Plattform läuft auf dem
Server. Der Mandant ergibt sich aus der Subdomain, zum Testen gibt es die öffentliche Sandbox
demo.kreativsimulator.com.
Test in 30 Sekunden: Laden Sie die Portalseite und schauen Sie im Netzwerk-Tab der
Entwicklerwerkzeuge, ob der Simulator schon lädt, bevor Sie zu ihm scrollen. Wenn ja, fehlt
loading="lazy", und jeder Besucher lädt Video, auch wenn er nie bis dorthin kommt.
3. Die Höhe nicht raten
Der häufigste Fehler nach dem Einbau ist ein zu niedriger Rahmen. Der Simulator füllt immer genau seinen Rahmen aus. Ist der zu flach, bleibt die Seite gleich lang. Stattdessen bekommt ein inneres Feld einen Scrollbalken. Das sieht nach einem Fehler aus, obwohl alles funktioniert.
Auf dem Handy braucht die Ansicht mehr Höhe als am Desktop, weil die Bedienung untereinander
statt nebeneinander steht. Mit dem Parameter ?fit=1 passt sich die Bildfläche an Breite und
Höhe an, und die geöffnete Seitenleiste verdeckt das Bild nicht.
Test in 30 Sekunden: Öffnen Sie die Seite mit der Gerätesimulation der Entwicklerwerkzeuge in Handybreite. Taucht irgendwo im Simulator ein zweiter Scrollbalken auf, geben Sie dem Rahmen mehr Höhe.
4. Das eigene Design einstellen
Die Vorschau steckt in Ihrem Portal, also sollte sie aussehen wie Ihr Portal. Farben, Schriften
und Platzhalter steuern Sie über eine eigene CSS-Datei, die Sie per ?theme= übergeben. Sprache
(?lang=), Startprodukt (?product=) und Hintergrund (?bg=) gehen ebenfalls über die Adresse.
Mit ?logo=0 erscheint im exportierten Bild oder Video kein Logo des Mandanten.
URL-Parameter haben dabei immer Vorrang vor den Einstellungen in VirtualCampaign. Das ist praktisch, wenn eine Kampagnenseite anders aussehen soll als das Hauptportal.
Test in 30 Sekunden: Legen Sie einen Screenshot Ihres Portals neben einen Screenshot des Simulators. Fällt Ihnen die Grenze zwischen beiden sofort auf, passt das Theme noch nicht.
5. Optional: von außen steuern
Viele Portale haben schon eine eigene Flächenliste mit Filtern. Dann soll der Simulator auf
Klick genau die Fläche laden, die der Kunde dort gewählt hat. Dafür gibt es
window.postMessage: Ihre Seite schickt Befehle wie setProduct oder setCreative, der
Simulator meldet Ereignisse wie ready und productChanged zurück.
Zwei Regeln von MDN gehören dabei in jede Umsetzung. Beim Senden geben Sie eine exakte Ziel-Origin
an, „not *“. Beim Empfangen prüfen Sie die Herkunft jeder Nachricht über origin. Das sind zwei
Zeilen Code. Sie verhindern, dass fremde Fenster mitreden.
Test in 30 Sekunden: Suchen Sie im eigenen Code nach postMessage( und nach "*". Steht
beides in derselben Zeile, ersetzen Sie den Stern durch die Adresse Ihres Simulators.
6. Optional: nur für angemeldete Kunden
Standardmäßig kann jeder die Simulator-Adresse öffnen. Soll die Vorschau nur hinter dem Login erscheinen, stellen Sie die Subdomain auf „Nur mit Token“. Ihr Server holt dann pro Seitenaufruf ein Token und gibt nur dieses an den iframe weiter. Der API-Key bleibt auf dem Server.
Ein Token gilt fünf Minuten und nur einmal. Es steht hinter einem # in der Adresse und geht so
nicht an Server, in Logs oder in den Referer. Eine kopierte iframe-Adresse funktioniert danach
nicht mehr.
Test in 30 Sekunden: Kopieren Sie die iframe-Adresse aus einer angemeldeten Sitzung und öffnen Sie sie in einem privaten Fenster. Zeigt sie dort Produkte, ist der Schutz nicht aktiv.
Warum das an einem Nachmittag geht
Die Schritte 1 bis 4 sind Konfiguration. Unsere Einschätzung aus Projekten: Ein Web-Team schafft sie an einem Nachmittag, inklusive Test auf dem Handy. Eigene Bedienelemente per postMessage und der Token-Abruf hinter dem Login sind echte Entwicklungsarbeit und kommen in einem zweiten Schritt.
Handarbeit bleibt bei den Flächen selbst. Der Simulator zeigt Motive auf Ihren echten Standorten, dafür braucht es gute Fotos. Bestehende Foto-Produkte übernehmen wir für Neukunden kostenlos. Die vollständige Anleitung mit Code und Live-Demo steht unter virtualcampaign.dev/embed.