Pop-ups über die Popup-API steuern

Mit der Popup-API steuern Sie jedes Pop-up per Code, statt sich nur auf die integrierten Trigger (Seitenaufruf, Verzögerung, Scrollen, Exit-Intent) zu verlassen. Rufen Sie window.llPopupsApi aus einem Custom-Code-Element oder einem beliebigen Skript auf, um ein Pop-up über eine Schaltfläche zu öffnen, es nach dem Absenden eines Formulars zu schließen oder Pop-ups in Ihre eigenen Integrationen einzubinden.

Verwenden Sie die ID des Pop-ups, nicht seinen Namen. Alles in der API spricht ein Pop-up über seine id an. Der Name des Pop-ups (die lesbare Bezeichnung im Editor) sind lediglich Metadaten für Analysen und Anzeige – er wird nie zur Adressierung genutzt. Sprechen Sie ein Pop-up über den Namen an, passiert nichts.

Schritt 1 – Das Pop-up vorbereiten

Bevor Sie ein Pop-up per Code steuern können, richten Sie es so ein, dass es Ihren Triggern nicht in die Quere kommt, und notieren Sie sich eine ID, auf die Sie verweisen können.

Den Trigger auf Manual setzen

Setzen Sie im Tab Popup der rechten Seitenleiste den Trigger auf Manual (nur per Schaltfläche). Das Pop-up öffnet sich dann nie automatisch, sondern nur, wenn Ihr Link oder Skript es öffnet.

Sie müssen Manual nicht verwenden. Die API funktioniert unabhängig vom Trigger bei jedem Pop-up. Manual stellt lediglich sicher, dass das Pop-up geschlossen bleibt, bis Sie es selbst öffnen.

Die ID des Pop-ups kopieren

Jedes Pop-up hat bereits eine eindeutige ID. Um sie zu finden, öffnen Sie in der linken Seitenleiste das Panel Popups, klicken Sie neben Ihrem Pop-up auf die drei Punkte (Aktionen) und wählen Sie Copy ID. Fügen Sie diesen Wert überall dort ein, wo die API die Popup-ID verlangt.

Die JavaScript-API (`window.llPopupsApi`)

Rufen Sie das globale Objekt window.llPopupsApi auf, um ein Pop-up zu öffnen, zu schließen oder umzuschalten – bei einem eigenen Event, nach einer selbst gesteuerten Verzögerung oder aus einem anderen Skript heraus. Fügen Sie den Code in ein Custom-Code-Element auf Ihrer Seite ein.

// Ein bestimmtes Pop-up öffnen
window.llPopupsApi.open('promo-popup-id');

Adressierung: Die ID ist optional

Jede Methode nimmt eine optionale Popup-ID entgegen:

ID übergeben → die Aktion betrifft genau dieses Pop-up.
ID weglassen → die Aktion betrifft alle Pop-ups auf der Seite.

window.llPopupsApi.close('promo-popup-id'); // ein Pop-up schließen
window.llPopupsApi.close();              // alle Pop-ups der Seite schließen

Methoden

Methode	Was sie bewirkt
`open(id?)`	Erzwingt das Öffnen des Pop-ups. Öffnet es auch dann erneut, wenn der Besucher es zuvor in der Sitzung geschlossen hat (Ihr expliziter Aufruf hat Vorrang).
`close(id?)`	Schließt das Pop-up samt Animation. Setzt kein „Stay Dismissed“-Cookie – das Pop-up kann erneut ausgelöst werden.
`dismiss(id?)`	Schließt das Pop-up und sperrt es: setzt das 30-Tage-Cookie, wenn Stay Dismissed aktiv ist, oder das Sitzungs-Flag, wenn Show Once aktiv ist. Genau das tut die eingebaute Schließen-Schaltfläche.
`toggle(id?)`	Öffnet das Pop-up, wenn es geschlossen ist, und schließt es, wenn es geöffnet ist. (Das Öffnen per Toggle erzwingt das Öffnen, genau wie `open`.)
`get(id?)`	Gibt das HTML-Element des Pop-ups zurück, wenn Sie eine ID übergeben (oder `null`, wenn keines gefunden wurde), oder ein Array aller Popup-Elemente, wenn Sie die ID weglassen.

close und dismiss im Vergleich. close() ist ein temporäres Schließen – automatische Trigger wie Exit-Intent können weiterhin auslösen. dismiss() gilt dauerhaft für die Sitzung (und mit Stay Dismissed bis zu 30 Tage). Nutzen Sie close() für „vielleicht später“ und dismiss() für „nicht erneut anzeigen“.

Beispiele

// Warten, bis die Seite bereit ist, bevor alles verdrahtet wird.
// DOMContentLoaded stellt sicher, dass sowohl Ihre Schaltfläche als auch llPopupsApi existieren.
document.addEventListener('DOMContentLoaded', function () {
  const button = document.getElementById('my-button');

  button.addEventListener('click', function () {
    window.llPopupsApi.open('promo-popup-id');
  });
});

// Das Pop-up 5 Sekunden nach dem Öffnen automatisch schließen
window.llPopupsApi.open('promo-popup-id');
setTimeout(function () {
  window.llPopupsApi.close('promo-popup-id');
}, 5000);

// Ein einzelnes Pop-up umschalten
window.llPopupsApi.toggle('promo-popup-id');

// Alle Pop-ups der Seite auf einmal schließen
window.llPopupsApi.close();

// Eine ID übergeben, um ein Element zu erhalten (oder null, wenn keines gefunden wurde)
const popup = window.llPopupsApi.get('promo-popup-id');

// Die ID weglassen, um ein Array aller Pop-ups der Seite zu erhalten
const allPopups = window.llPopupsApi.get();

Gut zu wissen

Führen Sie Ihren Code erst aus, wenn die Seite bereit ist. window.llPopupsApi existiert erst, sobald das Popup-Skript geladen wurde. Kapseln Sie Ihre Aufrufe in einen DOMContentLoaded-Listener – wie im Beispiel Über eine Schaltfläche öffnen oben –, damit die API beim Aufruf verfügbar ist.
Vorschaumodus. Auf Vorschau-URLs werden das „Stay Dismissed“-Cookie und das „Show Once“-Flag weder gelesen noch geschrieben, sodass das Pop-up beim Testen immer erscheint.
Mit ESC schließen. Ist Close on ESC für das Pop-up aktiviert, schließt die Taste Esc das oberste geöffnete Pop-up – ganz ohne Code.
Öffnen hat Vorrang vor dem Schließen. Ein Aufruf von open() öffnet ein Pop-up auch dann erneut, wenn ein Besucher es geschlossen hat. Die automatischen Trigger des Pop-ups respektieren die Schließung jedoch weiterhin. Nutzen Sie dismiss(), wenn Sie es wieder sperren möchten.

Erste Schritte

Landingpages

Visueller Editor (Canvas)

KI

Quizze (Funnels)

Workflows

Lead-Management

Domain

Mehrbenutzer

Testing und Reporting

Globale Blöcke

Integrationen

Profil

Schritt 1 – Das Pop-up vorbereiten

Die JavaScript-API (`window.llPopupsApi`)

Adressierung: Die ID ist optional

Methoden

Beispiele

Gut zu wissen

​Schritt 1 – Das Pop-up vorbereiten

​Die JavaScript-API (window.llPopupsApi)

​Adressierung: Die ID ist optional

​Methoden

​Beispiele

​Gut zu wissen

Schritt 1 – Das Pop-up vorbereiten

Die JavaScript-API (`window.llPopupsApi`)

Adressierung: Die ID ist optional

Methoden

Beispiele

Gut zu wissen