Saeid Samani ist Webentwickler, kreativer Denker und Unternehmer mit einem tiefen Verständnis für digitale Prozesse und moderne Webtechnologien. Er entwickelt durchdachte Webanwendungen, optimierte Benutzererlebnisse und skalierbare Lösungen, die Design, Funktionalität und Strategie miteinander verbinden. In seinem Blog teilt Saeid seine Erfahrungen aus der täglichen Praxis – von sauberem Code und effizientem Workflow bis hin zu Themen rund um Webentwicklung, Automatisierung und digitale Trends. Sein Stil: klar, pragmatisch und immer mit dem Ziel, Wissen greifbar und anwendbar zu machen. Abseits der Arbeit liebt er es, Neues zu lernen, Ideen auszuprobieren und Wege zu finden, Technologie sinnvoll im Alltag einzusetzen.

Teil 4 – Ziele und Funktionsumfang unserer Webinar-Applikation definieren

In den letzten drei Beiträgen haben wir bereits gelernt, wie man eine moderne Vue-Anwendung mit Pinia und dem Vue Router aufsetzt und sie anschließend mit einem Git-Repository verbindet. In diesem vierten Teil geht es nun nicht mehr um Technik, sondern um Planung: Wir definieren gemeinsam die Ziele und den Funktionsumfang unserer Webinar-Applikation. Dabei halten wir fest, was die App können soll – noch bevor wir uns darum kümmern, wie wir es technisch umsetzen.

Funktionsbeschreibung unserer Webinar-App

Unsere Webinar-App erhält alle relevanten Daten – wie Titel, Beschreibung, Datum und Uhrzeit, Bilder und sogar Farben – über eine REST-API direkt aus einem Template.
In diesem Tutorial habe ich mich entschieden, WordPress als Headless CMS zu verwenden und mithilfe von Advanced Custom Fields (ACF) ein schnelles und flexibles Backend aufzubauen.
Theoretisch kann das Backend jedoch auch jedes andere System sein.
Für dieses Tutorial gehen wir davon aus, dass das Backend bereits existiert – wir konzentrieren uns hier ausschließlich auf die Funktionalität der Vue-Anwendung.

Backend-Datenstruktur

Unser Backend liefert eine Konfiguration sowie die einzelnen Webinar-Daten im JSON-Format zurück.
Eine der wichtigsten Konfigurationsvariablen bestimmt, welches Webinar auf der Startseite angezeigt wird.
Wenn diese Variable nicht gesetzt ist, zeigt die App automatisch das nächste bevorstehende Webinar an – basierend auf dem Datum.
Ist das Datum bereits vergangen und ein weiteres Webinar vorhanden, wird dieses automatisch geladen.

Jedes Webinar ist außerdem über einen eindeutigen Permalink individuell aufrufbar.

Beispiel einer JSON-Konfiguration

Als Beispiel können Sie hier einen Blick auf die JSON-Datei werfen, mit der unsere Anwendung arbeitet.
Sie zeigt, wie die Datenstruktur aufgebaut ist und welche Informationen das Backend an die Vue-App übermittelt.

{
	"response": {
		"config": {
			"pdlpf_option_webinar_application_startpage": 144
		},
		"151": {
			"pdlpfw_template_number": "w01",
			"pdlpfw_ticker_headline": "Webinar gratuito",
			"pdlpfw_webinar_title": "Le 26 chiavi per mantenerci in armonia",
			"pdlpfw_webinar_short_description": "Vuoi liberare blocchi, sciogliere tensioni e ritrovare armonia? Riacquista equilibrio, energia e salute attraverso le Serrature energetiche del Jin Shin Jyutsu - semplici chiavi di auto-aiuto per il tuo benessere.",
			"pdlpfw_teaser_video": "",
			"pdlpfw_speaker_image": "https://ulrikesieferle.com/wp-content/uploads/2025/11/ulrike.jpg",
			"pdlpfw_speaker_name": "Ulrike Sieferle",
			"pdlpfw_speaker_job_title": "Naturopata",
			"pdlpfw_speaker_slogan": "Insegnante di Jin Shin Jyutsu",
			"pdlpfw_webinar_date": "2025-11-23 20:00:00",
			"pdlpfw_webinar_date_label": "Domenica 23<br>novembre<br>alle 20:00",
			"pdlpfw_countdown_frame": "https://ulrikesieferle.com/wp-content/uploads/2025/11/M-C-01.png",
			"pdlpfw_countdown_label": "Il webinar inizia tra",
			"pdlpfw_countdown_label_days": "Giorni",
			"pdlpfw_countdown_label_hours": "Ore",
			"pdlpfw_countdown_label_minutes": "Minuti",
			"pdlpfw_countdown_label_seconds": "Secondi",
			"pdlpfw_bulletpoints_title": "In questo webinar gratuito  scoprirai:",
			"pdlpfw_bulletpoint_1": "Cosa sono le <strong>serrature di sicurezza</strong> del Jin Shin Jyutsu e <strong>come agiscono sul tuo corpo e sulla tua energia</strong>",
			"pdlpfw_bulletpoint_2": "Come trasformare le disarmonie e le somatizzazioni in <strong>salute e benessere</strong>",
			"pdlpfw_bulletpoint_3": "Come ritrovare <strong>energia e vitalità</strong> anche se soffri di stress e stanchezza cronica",
			"pdlpfw_bulletpoint_4": "Come <strong>sciogliere tensioni e dolori fisici </strong>ricorrenti (mal di schiena, tensioni muscolari, mal di testa…)",
			"pdlpfw_bulletpoint_5": "",
			"pdlpfw_bulletpoint_6": "",
			"pdlpfw_bulletpoint_7": "",
			"pdlpfw_bulletpoint_8": "",
			"pdlpfw_form_placeholder_name": "Noma",
			"pdlpfw_form_placeholder_email": "Indirizzo e-mail",
			"pdlpfw_form_submit_label": "Si, lo voglio",
			"pdlpfw_form_marketing_arrow": "https://ulrikesieferle.com/wp-content/uploads/2025/11/M-A-01.png",
			"pdlpfw_thanks_headline": "Congratulazioni! Ci sei anche tu!",
			"pdlpfw_thanks_description": "<div id=\"element-Cipm8D6c\" class=\"editor\" data-element-id=\"Cipm8D6c\">\r\n<div>\r\n<p style=\"text-align: center;\"><strong>Hai completato con successo l’iscrizione al webinar gratuito “Le 26 chiavi per mantenerci in</strong>\r\n<strong>armonia”.</strong></p>\r\n<p style=\"text-align: center;\">Sono felice che tu abbia deciso di dedicare del tempo a te e al tuo benessere.</p>\r\nTi aspetto per condividere un sapere millenario che può aiutarti a risuonare di gioia con il tuo\r\ncorpo e la tua vita.\r\n\r\n</div>\r\n</div>",
			"pdlpfw_thanks_countdown_enabled": "1",
			"pdlpfw_replay_headline": "La registrazione del nostro webinar",
			"pdlpfw_replay_video": "https://www.youtube.com/watch?v=l2q7lc7mNhY",
			"pdlpfw_replay_description": "È stato un webinar fantastico.<br data-start=\"30\" data-end=\"33\" />Come promesso durante il webinar, hai ora la possibilità di rivedere la registrazione del nostro incontro.<br data-start=\"139\" data-end=\"142\" />Qui sotto troverai anche la mia offerta per una futura collaborazione insieme.<br data-start=\"220\" data-end=\"223\" />L’offerta è valida solo per un periodo limitato e i posti disponibili sono pochi.",
			"pdlpfw_replay_cta_label": "Acquista ora",
			"pdlpfw_replay_cta_link": "https://parsedesign.com/",
			"pdlpfw_navigation_imprint_label": "Note legali",
			"pdlpfw_navigation_imprint_url": "https://parsedesign.com/imprint/",
			"pdlpfw_navigation_privacy_label": "Protezione dei dati",
			"pdlpfw_navigation_privacy_url": "https://parsedesign.com/dichiarazione-sulla-privacy-ue/",
			"pdlpfw_color_1": "#212121",
			"pdlpfw_color_2": "#ffffff",
			"pdlpfw_color_3": "#2faff7",
			"pdlpfw_color_4": "#fff6d7",
			"pdlpfw_color_5": "#efefef",
			"pdlpfw_color_6": "#d8d8d8",
			"pdlpfw_color_cta_from": "#fddc03",
			"pdlpfw_color_cta_to": "#f2c503",
			"pdlpfw_color_cta_border": "#c19d08",
			"pdlpfw_color_cta_text": "#212121",
			"pdlpfw_webhook_url": "https://parsedesign.com/wp-json/pdlpf/v1/webinar/submit",
			"pdlpfw_thanks_url": "https://lp.parsedesign.com/le-26-chiavi-per-mantenerci-in-armonia-2025-11-23-200000/?step=thanks",
			"pdlpfw_replay_url": "https://lp.parsedesign.com/le-26-chiavi-per-mantenerci-in-armonia-2025-11-23-200000?step=replay"
		},
		"144": {
			"pdlpfw_template_number": "w01",
			"pdlpfw_ticker_headline": "Webinar gratuito",
			"pdlpfw_webinar_title": "Le 26 chiavi per mantenerci in armonia",
			"pdlpfw_webinar_short_description": "Vuoi liberare blocchi, sciogliere tensioni e ritrovare armonia? Riacquista equilibrio, energia e salute attraverso le Serrature energetiche del Jin Shin Jyutsu - semplici chiavi di auto-aiuto per il tuo benessere.",
			"pdlpfw_teaser_video": "",
			"pdlpfw_speaker_image": "https://ulrikesieferle.com/wp-content/uploads/2025/11/ulrike.jpg",
			"pdlpfw_speaker_name": "Ulrike Sieferle",
			"pdlpfw_speaker_job_title": "Naturopata",
			"pdlpfw_speaker_slogan": "Insegnante di Jin Shin Jyutsu",
			"pdlpfw_webinar_date": "2025-12-31 20:00:00",
			"pdlpfw_webinar_date_label": "Domenica 30<br>novembre<br>alle 20:00",
			"pdlpfw_countdown_frame": "https://ulrikesieferle.com/wp-content/uploads/2025/11/M-C-01.png",
			"pdlpfw_countdown_label": "Il webinar inizia tra",
			"pdlpfw_countdown_label_days": "Giorni",
			"pdlpfw_countdown_label_hours": "Ore",
			"pdlpfw_countdown_label_minutes": "Minuti",
			"pdlpfw_countdown_label_seconds": "Secondi",
			"pdlpfw_bulletpoints_title": "In questo webinar gratuito  scoprirai:",
			"pdlpfw_bulletpoint_1": "Cosa sono le <strong>serrature di sicurezza</strong> del Jin Shin Jyutsu e <strong>come agiscono sul tuo corpo e sulla tua energia</strong>",
			"pdlpfw_bulletpoint_2": "Come trasformare le disarmonie e le somatizzazioni in <strong>salute e benessere</strong>",
			"pdlpfw_bulletpoint_3": "Come ritrovare <strong>energia e vitalità</strong> anche se soffri di stress e stanchezza cronica",
			"pdlpfw_bulletpoint_4": "Come <strong>sciogliere tensioni e dolori fisici </strong>ricorrenti (mal di schiena, tensioni muscolari, mal di testa…)",
			"pdlpfw_bulletpoint_5": "",
			"pdlpfw_bulletpoint_6": "",
			"pdlpfw_bulletpoint_7": "",
			"pdlpfw_bulletpoint_8": "",
			"pdlpfw_form_placeholder_name": "Noma",
			"pdlpfw_form_placeholder_email": "Indirizzo e-mail",
			"pdlpfw_form_submit_label": "Si, lo voglio",
			"pdlpfw_form_marketing_arrow": "https://ulrikesieferle.com/wp-content/uploads/2025/11/M-A-01.png",
			"pdlpfw_thanks_headline": "Congratulazioni! Ci sei anche tu!",
			"pdlpfw_thanks_description": "<div id=\"element-Cipm8D6c\" class=\"editor\" data-element-id=\"Cipm8D6c\">\r\n<div>\r\n<p style=\"text-align: center;\"><strong>Hai completato con successo l’iscrizione al webinar gratuito “Le 26 chiavi per mantenerci in</strong>\r\n<strong>armonia”.</strong></p>\r\n<p style=\"text-align: center;\">Sono felice che tu abbia deciso di dedicare del tempo a te e al tuo benessere.</p>\r\nTi aspetto per condividere un sapere millenario che può aiutarti a risuonare di gioia con il tuo\r\ncorpo e la tua vita.\r\n\r\n</div>\r\n</div>",
			"pdlpfw_thanks_countdown_enabled": "1",
			"pdlpfw_replay_headline": "La registrazione del nostro webinar",
			"pdlpfw_replay_video": "https://www.youtube.com/watch?v=l2q7lc7mNhY",
			"pdlpfw_replay_description": "È stato un webinar fantastico.<br data-start=\"30\" data-end=\"33\" />Come promesso durante il webinar, hai ora la possibilità di rivedere la registrazione del nostro incontro.<br data-start=\"139\" data-end=\"142\" />Qui sotto troverai anche la mia offerta per una futura collaborazione insieme.<br data-start=\"220\" data-end=\"223\" />L’offerta è valida solo per un periodo limitato e i posti disponibili sono pochi.",
			"pdlpfw_replay_cta_label": "Acquista ora",
			"pdlpfw_replay_cta_link": "https://parsedesign.com/",
			"pdlpfw_navigation_imprint_label": "Note legali",
			"pdlpfw_navigation_imprint_url": "https://parsedesign.com/imprint/",
			"pdlpfw_navigation_privacy_label": "Protezione dei dati",
			"pdlpfw_navigation_privacy_url": "https://parsedesign.com/dichiarazione-sulla-privacy-ue/",
			"pdlpfw_color_1": "#212121",
			"pdlpfw_color_2": "#ffffff",
			"pdlpfw_color_3": "#2faff7",
			"pdlpfw_color_4": "#fff6d7",
			"pdlpfw_color_5": "#efefef",
			"pdlpfw_color_6": "#d8d8d8",
			"pdlpfw_color_cta_from": "#fddc03",
			"pdlpfw_color_cta_to": "#f2c503",
			"pdlpfw_color_cta_border": "#c19d08",
			"pdlpfw_color_cta_text": "#212121",
			"pdlpfw_webhook_url": "https://parsedesign.com/wp-json/pdlpf/v1/webinar/submit",
			"pdlpfw_thanks_url": "https://lp.parsedesign.com/le-26-chiavi-per-mantenerci-in-armonia-2025-12-31-200000/?step=thanks",
			"pdlpfw_replay_url": "https://lp.parsedesign.com/le-26-chiavi-per-mantenerci-in-armonia-2025-12-31-200000?step=replay"
		}
	}
}

Anmelde- und Webhook-Funktion

Nach dem Absenden des Opt-in-Formulars werden die eingegebenen Daten an einen Webhook übermittelt.
In der Praxis kann dies z. B. ein Zapier-Webhook sein.
In meinem Beispiel verwende ich einen Webhook, der in WordPress definiert ist:
Dieser empfängt die Daten, sendet eine Bestätigungs-E-Mail an die angemeldete Person und übergibt die Daten gleichzeitig an MailerLite.
Der Webhook-Link kann im Backend in der jeweiligen Webinar-Konfiguration hinterlegt werden.

Nach der erfolgreichen Anmeldung wird der Nutzer zu einem Danke-Schritt weitergeleitet.
Dort werden Datum und Uhrzeit des Webinars sowie eine im Backend definierte Dankesnachricht angezeigt.
Außerdem erscheint ein Countdown, der bis zum Start des Webinars herunterzählt.

Replay-Seite und Funnel-Integration

Da Webinare häufig der Einstieg in einen Verkaufs- oder Coaching-Funnel sind, enthält jedes Webinar auch eine Replay-Seite.
Hier können angemeldete Teilnehmer die Aufzeichnung des Webinars ansehen.
Diese Seite bietet zudem die Möglichkeit, Angebote oder weiterführende Links zu präsentieren, um die Conversion-Rate nach dem Webinar zu steigern.

Design-Anpassung

Unser Vue-Template soll in der Lage sein, die Farben und Designeinstellungen jedes Webinars dynamisch aus der Backend-Konfiguration zu übernehmen.
So bleibt jede Landing-Page visuell konsistent mit dem jeweiligen Branding – ohne manuelle Anpassungen im Frontend.