Zum Hauptinhalt springen
Alle KollektionenDeinen Funnel bearbeitenFunnelelemente einfügen und bearbeitenCustom HTML Code
Wie kann ich HTML Code zu meinem Funnel hinzufügen?
Wie kann ich HTML Code zu meinem Funnel hinzufügen?

Wie du Besucher die Möglichkeit gibst innerhalb deines Funnels auf externe Elemente & Anwendungen zuzugreifen

Luise avatar
Verfasst von Luise
Vor über 4 Monaten aktualisiert

Der HTML-Block ermöglicht es dir, benutzerdefinierte Elemente oder Anwendungen innerhalb deiner Funnels einzubinden.

Wenn du ein Google Sheet hinzufügen, ein PDF anzeigen oder irgendeine andere Anwendung eines Drittanbieters einbetten möchtest, kannst du das mit dem HTML-Block tun. Die Möglichkeiten sind endlos.

💡 Diese Funktion ist aktuell ausschließlich für Advanced Plan Nutzer verfügbar. Klicke hier, um weitere Informationen über unsere Pläne zu erhalten.

Springe direkt zu:


Wie kann ich eigenen HTML Code hinzufügen?

Um HTML Code einzufügen musst du zunächst einen HTML Block in deinem Funnel hinzufügen:
​
1. Klicke auf ein Layout in deinem Funnel
2. Klicke auf das kleine blaue "+" um einen neuen Block einzufügen


3. Wähle den "HTML" Block aus
​

4. Klicke auf das HTML Symbol um den Embed Code zu bearbeiten

5. Füge deinen Embed Code ein


6. Geschafft! Sobald du deinen HTML-Code eingefügt hast, siehst du dein Embed rechts in der Vorschau
​

Veröffentliche deine Änderungen, und schon hast du deinen gewünschten Inhalte in deinem Funnel.

Platzhalter und Custom Variablen nutzen

Du kannst deinen HTML-Code auch um Angaben von Nutzern von z.B. einem Formular anreichern.

Dazu kannst du in deinem Code Variablen einsetzen. Eine Variable fängt immer mit zwei geschwungenen Klammern an und hört mit zwei auf: {{variable}}

Standardvariablen

Folgende Standardvariablen kannst du nutzen:

  • {{email}} : E-Mail aus Formular

  • {{name}} : Vor- und Nachname aus Formular

  • {{firstName}} : Vorname aus Formular

  • {{lastName}} : Nachname aus Formular

  • {{phone}} : Telefonnummer aus Formular

  • {{birthday}} : Geburtstag aus Formular

  • {{datePicker}} : Ausgewähltes Datum aus Formular

  • {{dropdown}} : Ausgewählte Zeit aus Formular

  • {{website}} : Website URL aus Formular

  • {{message}} : Nachricht aus Formular

  • {{file}} : ???

  • {{city}} : Stadt aus Formular

  • {{zip}} : Postleitzahl aus Formular

  • {{country}} : Land aus Formular

Benutzerdefinierte Variablen

Es können aber benutzerdefinierte Eingaben genutzt werden. Füge dazu zu einem Formular

  • ein benutzerdefiniertes Feld hinzu,

  • passe es nach deinem Wünschen an

  • und ganz wichtig, vergebe eine eindeutige Tracking ID

Jetzt kannst du in deinem HTML Code folgende Variable nutzen – passend zum Beispiel-Feld das im obigen Bild gezeigt wird: {{benutzerdefiniertes_feld}}

URL-Variablen


Solltest du über Text-Element URL-Variablen, die mit ps_ starten, hinzugefügt haben, kannst du auch diese im HTML Code benutzen.

Angenommen du hast die URL-Variable ps_category erstellt, dann kannst du im HTML Code die Variable {{category}} nutzen.

UTMs


Auch UTM-Parameter können als Variablen genutzt werden.

Folgende Variablen werden unterstützt:

  • {{utm_campaign}} → Wert des UTM-Parameters utm_campaign

  • {{utm_content}} → Wert des UTM-Parameters utm_content

  • {{utm_medium}} → Wert des UTM-Parameters utm_medium

  • {{utm_source}} → Wert des UTM-Parameters utm_source

  • {{utm_term}} → Wert des UTM-Parameters utm_term

Sollte ein Funnel ein ohne einen bestimmten UTM Parameter aufgerufen werden, so werden dazugehörige Variablen durch leeren Text ersetzt.

Seitennavigation

Du kannst auch über einen HTML-Code eine Seitennavigation auslösen über JavaScript-Funktionen.

Zur nächsten Seite navigieren

Dazu kann die Funktion window.perspective.navigateToNextPage() aufgerufen werden.
Ein Beispiel:

<button id="navigate"> Navigieren </button> <script> document.getElementById('navigate').addEventListener('click', () => { window.perspective.navigateToNextPage(); }); </script>

Zur ersten Ergebnisseite navigieren

Dazu kann die Funktion window.perspective.navigateToResultPage() aufgerufen werden.
Ein Beispiel:

<button id="navigate"> Navigieren </button> <script> document.getElementById('navigate').addEventListener('click', () => { window.perspective.navigateToResultPage(); }); </script>

Zu einer bestimmten Seite navigieren

Dazu benötigt du den Slug der jeweiligen Seite. Diesen findest du z.B. im Editor über die Seitenoption “URL ändern”.

Den Wert den du dort findest, kopierst du nun. Zum Navigieren zu einer bestimmten Seite kannst du die Funktion window.perspective.navigateToPageBySlug(pageSlug) aufrufen.
Hier ein Beispiel:

<button id="navigate"> Navigieren </button> <script> document.getElementById('navigate').addEventListener('click', () => { window.perspective.navigateToPageBySlug('page_6htyyt'); }); </script>

Was kann ich mit dem HTML Code einbinden?

In der Theorie ist deiner Vorstellungskraft keine Grenzen gesetzt. Hier haben wir ein paar Beispiele:

Tipp 💡
​

Du kannst dir auch über ChatGPT ein passendes HTML Widget generieren lassen. Passe einfach diesen Prompt für dein Vorhaben an:

Write me HTML code without `html`, `head` or `body` tags.

The HTML code shall achieve the following:

- ...

Hier kannst du dann weiter spezifizieren was angezeigt werden soll z.B.:

  • Show a countdown until the 24th of December 2024

  • Show the remaining days, hours, and seconds

  • ...


​

Weitere Informationen zu folgenden Themen bei uns im Helpcenter:

Hat dies deine Frage beantwortet?