Popup-Generator
Ein Popup-Generator baut das gewünschte Fenster und gibt Ihnen den Einbettungscode. Titel, Nachricht, Schaltfläche und Farben festlegen, einen Auslöser und die Anzeigehäufigkeit wählen — und der Bereich Einbettungscode druckt ein einzelnes Script-Tag, das auf popup.min.js zeigt und Ihre Einstellungen als data-Attribute trägt: data-trigger, data-delay, data-bg und so weiter.
Inhalt
Auslöser und Verhalten
Anpassen
Voreinstellungen
Live-Vorschau
Einbettungscode
Beliebte Werkzeuge
Über Popup-Generator
Das Formular besteht aus vier Blöcken. Content nimmt Titel, Nachricht, Schaltflächentext und deren URL auf. Trigger & Behavior wählt zwischen Timed Delay, Scroll %, Exit Intent und On Page Load, dazu eine Verzögerung in Sekunden oder einen Scroll-Prozentwert, eine Häufigkeit von Every Visit, Once Per Session, Once Per Day oder Once Forever und eine Animation Fade oder Slide. Der Stilblock setzt Hintergrund, Textfarbe, Schaltflächenfarbe und einen Regler für die Eckenrundung, dazu die Schalter Overlay Backdrop, Close on Overlay Click und die Markenzeile. Vier Vorlagen — Newsletter, Discount, Dark und Exit Intent — füllen alles auf einmal.
Die Live-Vorschau zeichnet das Fenster beim Tippen neu, und der Bereich Einbettungscode zeigt genau das Tag, das Sie einfügen. Es ist ein einziges script-Element, das popup.min.js von dieser Seite lädt und nur die Einstellungen mitführt, die vom Standard abweichen: Ein einfaches Newsletter-Popup ergibt daher ein kurzes Tag statt zwanzig Attributen.
Die Auslöser verhalten sich genau bestimmt. Exit Intent lauscht darauf, dass der Zeiger oben aus dem Fenster fährt — ein mouseout ohne verwandtes Ziel innerhalb von fünf Pixeln zum oberen Rand — er greift also am Rechner und nie auf einem Touchscreen. Scroll % misst die Position in der scrollbaren Höhe und löst einmalig oberhalb Ihres Wertes aus. Die Häufigkeit merkt sich das Gerät der Besucherin: Once Per Session im sessionStorage, Once Per Day und Once Forever im localStorage, unter einem Schlüssel aus dem Titel des Popups.
Grenzen: Das Popup ist eine Nachricht mit einem Link, kein Formular — es sammelt keine E-Mail-Adressen, und es gibt weder Statistik noch A/B-Test noch Seiten-Targeting: Wo das Tag eingefügt wird, entscheidet, wo das Popup erscheint. Der Generator schreibt nur Code, hier wird nichts gespeichert, und das Script kommt von dieser Seite — für eine Offline-Kopie müssten Sie popup.min.js selbst hosten.
Anwendungsfälle
Anleitung
Füllen Sie unter Content Titel, Nachricht, Schaltflächentext und URL aus, oder klicken Sie eine der Vorlagen Newsletter, Discount, Dark oder Exit Intent an.
Wählen Sie unter Trigger & Behavior Timed Delay, Scroll %, Exit Intent oder On Page Load und setzen Sie Verzögerung oder Scroll-Prozentwert, Häufigkeit und Animation.
Stellen Sie Hintergrund, Textfarbe, Schaltflächenfarbe und den Radius-Regler ein und entscheiden Sie über Overlay Backdrop, Close on Overlay Click und die Markenzeile.
Prüfen Sie die Live-Vorschau, die beim Tippen neu zeichnet.
Kopieren Sie das einzelne Script-Tag aus dem Bereich Einbettungscode und fügen Sie es kurz vor dem schließenden body-Tag in Ihre Seite ein.
Prüfen Sie das Popup im Bereich Live-Vorschau, klicken Sie dann im Bereich Einbettungscode auf Kopieren und fügen Sie das Script-Tag in das HTML Ihrer Website ein.
Profi-Tipps
- Der Code listet nur Einstellungen, die vom Standard abweichen — ein kurzes Tag bedeutet also nicht, dass etwas fehlt: 5 Sekunden Verzögerung und Once Per Session sind bereits das Verhalten des Widgets.
- Exit Intent löst auf dem Handy nie aus: Er hängt daran, dass der Mauszeiger oben aus dem Fenster fährt, und ein Touchscreen hat keinen. Kombinieren Sie ihn mit einem Scroll- oder Zeit-Popup, wenn Mobil zählt.
- Die Häufigkeit wird je Popup-Titel gespeichert: Ein neuer Titel bedeutet einen neuen Schlüssel, und alle, die das alte Popup bereits weggeklickt hatten, sehen das neue.
- Wird die Markenzeile abgewählt, erhält das Tag data-branding="false", und die kleine Zeile Powered by FreeWebTools unter der Schaltfläche entfällt.
- Das Widget versteht außerdem data-position="bottom", wofür das Formular keinen Schalter hat — von Hand ins Tag ergänzen, dann sitzt das Popup unten am Bildschirm statt in der Mitte.
Fehlerbehebung
Das Popup erscheint auf meiner Seite gar nicht.
Prüfen Sie der Reihe nach drei Dinge: dass das Tag im HTML der Seite steht und nicht in einem Text- oder Markdown-Feld, dass Ihre Häufigkeit nicht bereits erfüllt ist — Once Per Session verbirgt es bis zum Schließen des Tabs — und dass der gewählte Auslöser überhaupt eintreten kann, denn Exit Intent braucht eine Maus.
Am Rechner klappt es, auf dem Handy nicht.
Meist liegt es an Exit Intent: Er hängt daran, dass der Zeiger oben aus dem Fenster fährt, und ein Touchscreen erzeugt dieses Ereignis nie. Stellen Sie für mobilen Verkehr auf Timed Delay oder Scroll % um oder liefern Sie ein zweites Tag mit anderem Auslöser aus.
Ich habe das Popup nur einmal gesehen und es kommt nicht wieder.
Das ist die Häufigkeit. Once Per Session merkt sich der sessionStorage bis zum Schließen des Tabs, Once Per Day und Once Forever der localStorage. Löschen Sie den Speicher der Seite oder nutzen Sie ein privates Fenster, um es beim Testen wiederzusehen.
Ich habe das Design geändert, Besucher sehen aber das alte Popup.
Das Tag ist das Popup: Ein altes Tag auf der Seite behält seine alten Einstellungen. Ersetzen Sie das ganze script-Element, nicht nur einen Teil, und leeren Sie danach Seiten- und CDN-Cache. Eine veraltete Kopie im eigenen Browser-Cache ist ebenfalls auszuschließen.
Das Ändern des Titels hat die Häufigkeit für alle zurückgesetzt.
Der Speicherschlüssel wird aus dem Titel gebildet: Ein neuer Titel ist ein neuer Schlüssel, frühere Wegklicks zählen nicht mehr. Das ist nützlich, wenn eine Kampagne bewusst wieder gesehen werden soll, und gut zu wissen, wenn nur ein Tippfehler korrigiert werden sollte.
Häufig gestellte Fragen
Ein HTML-Script-Tag. Es zeigt auf popup.min.js dieser Seite und trägt Ihre Einstellungen als data-Attribute — data-title, data-text, data-btn-text, data-trigger, data-bg und so weiter — wobei alles im Standard Weggelassene fehlt. Dieses eine Tag in die Seite einfügen, und das Popup erscheint; löschen, und es ist weg.
Kopieren Sie das Tag aus dem Bereich Einbettungscode und fügen Sie es in das HTML der Seite ein, kurz vor dem schließenden body-Tag. In WordPress ist das ein Block Individuelles HTML oder die Theme-Fußzeile, auf einer statischen Seite das Template. Kein Konto, kein Plugin, kein Build-Schritt.
Vier. Timed Delay wartet die Sekunden aus dem Feld Delay ab. Scroll % wartet, bis so weit gescrollt wurde. Exit Intent wartet darauf, dass der Zeiger oben aus dem Fenster fährt. On Page Load zeigt das Popup sofort. Das Formular blendet jeweils nur das passende Feld Delay oder Scroll ein.
Das Script lauscht auf ein mouseout-Ereignis am Dokument ohne verwandtes Ziel, das innerhalb von fünf Pixeln zum oberen Fensterrand auftritt — die Bewegung, wenn jemand zur Adressleiste oder zu einem Tab greift. Es löst einmal pro Seitenaufruf aus. Da es einen Mauszeiger braucht, greift es auf Handy und Tablet nie.
Das regelt Frequency. Every Visit zeigt es bei jedem Seitenaufruf; Once Per Session einmal, bis der Tab geschlossen wird; Once Per Day wartet 24 Stunden bis zur nächsten Anzeige; Once Forever zeigt es ein einziges Mal. Once Per Session ist der Standard und steht deshalb nicht im erzeugten Tag.
Im Browser des Besuchers, nicht auf einem Server. Once Per Session schreibt in den sessionStorage, Once Per Day und Once Forever in den localStorage, unter einem Schlüssel aus dem Titel Ihres Popups. Werden die Website-Daten gelöscht oder ein privates Fenster geöffnet, beginnt es von vorn.
Nein. Das Popup zeigt eine Überschrift, eine Textzeile und eine Schaltfläche, die auf eine von Ihnen angegebene URL führt — es gibt kein Formularfeld und es wird nichts übermittelt. Für Adressen lassen Sie Button URL auf eine Seite oder ein Formular Ihres E-Mail-Anbieters zeigen, das die Erfassung übernimmt.
Ja, aber über die Platzierung und nicht über eine Einstellung. Das Script läuft dort, wo das Tag steht: in einer seitenweiten Fußzeile überall, im HTML einer einzelnen Seite nur dort. URL-Regeln, Zielgruppen-Targeting und Zeitpläne gibt es im Generator nicht.
Das Formular zentriert es immer, doch das Widget dahinter kennt data-position="bottom". Tag kopieren, das Attribut von Hand ergänzen — dann sitzt das Fenster 24 Pixel über der Unterkante statt in der Mitte. Alle anderen Attribute arbeiten unverändert weiter.
Wählen Sie die Markenzeile vor dem Kopieren ab. Das Tag enthält dann data-branding="false", und das Widget lässt den kleinen Link Powered by FreeWebTools unter der Schaltfläche weg. Ihn stehen zu lassen kostet nur eine 10 Pixel hohe graue Zeile.