Eigenes Produkt · seit Juli 2025

KlickPlayer

Interaktive Videos, die wie ein Verkaufsgespräch funktionieren.

60+ aktive Nutzer

KlickPlayer macht aus einem gewöhnlichen Video ein Gespräch. Zuschauer wählen per Klick, was sie interessiert, springen zu den passenden Abschnitten und fragen direkt im Video einen Termin an. Unternehmen bauen solche Videos ohne Programmierkenntnisse im Browser, verschicken sie als persönliche Links und sehen in der Auswertung, welche Inhalte wirken.

Live ansehen · klickplayer.de

Mach dir selbst einen Eindruck und klick dich durch ein interaktives Video aus meiner Software.

Die Idee

Ein Video, das Fragen stellt.

Ein Imagefilm sendet in eine Richtung: alle Zuschauer sehen dasselbe, in derselben Reihenfolge. Wer nach zwanzig Sekunden das Interesse verliert, ist weg. KlickPlayer dreht dieses Prinzip um. Das Video stellt Fragen, bietet an den richtigen Stellen Antworten zur Auswahl an und führt jeden Zuschauer auf seinem eigenen Weg durch die Inhalte, bis zur Anfrage, zum Anruf oder zum gebuchten Termin.

Der gesamte Weg ist in einer Anwendung abgebildet: Video hochladen, Buttons und Abzweigungen setzen, das Erscheinungsbild anpassen, veröffentlichen, einbetten oder als persönlichen Link verschicken und danach genau sehen, was die Zuschauer getan haben. Im Herbst 2026 habe ich die Plattform grundlegend neu aufgebaut: neues Datenmodell, überarbeiteter Editor, ein gemeinsamer Player-Kern und eine neue Oberfläche.

Das Video stellt eine Frage.
Öffnet der Zuschauer die Kiste oder nicht? Jeder Button führt ohne spürbare Wartezeit zu einem anderen Abschnitt, weil der Player die Sprungziele vorab lädt.
Der Zuschauer wählt sein Thema.
Ein Themenmenü mitten im Video: Problemlösung, Zusammenarbeit, Nachteile, Möglichkeiten. Jeder sieht genau das, was ihn interessiert, in seiner eigenen Reihenfolge.
Der Zuschauer wird zur Anfrage geleitet.
Am Ende bietet das Video den nächsten Schritt an, hier „Kontakt“ und „Preisrechner“. Jeder Klick auf eine solche Hauptaktion zählt in der Auswertung als Anfrage. So ist sichtbar, welcher Weg durchs Video zum Kunden führt.

Funktionen

Was es kann.

Vom ersten Upload bis zur Anfrage: der ganze Weg in einer Anwendung.

Der Editor

Interaktivität direkt auf dem Video.

Links Vorschau und Zeitleiste, rechts alle Elemente des Videos. Jedes Element ist ein Balken auf der Zeitleiste und wird auf dem Video per Drag-and-drop platziert. Wer an eine Stelle spult und „Element einfügen“ klickt, setzt den Button genau dort, wo er gebraucht wird.

Buttons, Pausen, Sprünge, Texte, Lottie-Animationen und HTML-Grafiken
Sprung zu Zeitpunkt oder Video, Link, Anruf oder E-Mail je Button
Kapitel, Prüfung auf Unvollständiges, Rückgängig
Import von Buttons aus Excel oder anderen Projekten

Personalisierung & HTML-Grafiken

Jeder Zuschauer wird persönlich begrüßt.

Platzhalter wie {{vorname}} oder {{firma}} werden beim Abspielen mit Werten aus dem Link gefüllt. So spricht ein und dasselbe Video jeden Empfänger mit Namen an. Für alles, was über Buttons hinausgeht, gibt es HTML-Grafiken: Bauchbinden, Titelkarten oder Zähler als animierte Ebene über dem Video.

Standardtext, wenn ein Wert im Link fehlt
HTML-Grafiken in einer Sandbox ohne Netzwerkzugriff
Synchron beim Pausieren und Spulen, in Quer- und Hochformat
Automatische Regelprüfung schon im Editor

Personalisierte Kampagnen

Ein Video, viele persönliche Botschaften.

Eine Empfängerliste als Excel- oder CSV-Datei genügt, und jeder Empfänger bekommt einen eigenen, kurzen Link, über den ihn das Video mit Namen und Firma anspricht. Ideal für LinkedIn-Nachrichten, Akquise-Mails oder die Nachbereitung einer Messe.

Trichter: geöffnet, angesehen, interagiert, angefragt
Neueste Reaktionen und die interessiertesten Empfänger
Erinnerung an alle, die den Link noch nicht geöffnet haben
Unterkampagnen und CSV-Export, gemessen nur mit Einwilligung

Kampagnen-Auswertung mit Beispieldaten: vom Empfänger bis zur Anfrage

Analyse & A/B-Tests

Sehen, was wirkt.

Aufrufe, Klickrate, Sehdauer und als wichtigste Kennzahl die entstandenen Anfragen, jeweils im Vergleich zum Vorzeitraum. Dazu Zuschauerkurve, Rangliste der Buttons und ein Kasten „Was auffällt“ in Klartext. A/B-Tests teilen die Zuschauer auf Varianten auf und prüfen mit 95 % Konfidenz, ob ein Unterschied belastbar ist.

Bots und Link-Scanner von E-Mail-Programmen werden herausgefiltert
Buttons getrennt nach Desktop und Smartphone
Gewinner eines A/B-Tests mit einem Klick übernehmen
Berichte als CSV

KI-Anbindung

Bedienbar von Claude, ChatGPT und Cursor.

Über einen eigenen MCP-Server verbinden sich KI-Assistenten direkt mit dem Konto und arbeiten in natürlicher Sprache mit 52 Werkzeugen: Transkript lesen und Kapitel anlegen, passende Buttons setzen, HTML-Grafiken bauen, Kampagnen anlegen oder die Analyse zusammenfassen. Die Verbindung läuft über einen selbst implementierten OAuth-2.1-Server.

Dynamische Client-Registrierung, PKCE, rotierende Refresh-Tokens
Heikle Rechte wie Veröffentlichen oder Löschen sind nie vorausgewählt
Änderungen landen im Entwurf, Löschen verlangt eine zweite Bestätigung
Dazu eine REST-API mit OpenAPI-Spezifikation

Datenschutz by Design

Teil der Architektur, keine Einstellung.

Anwendung und Datenbank laufen in Frankfurt, Videos werden in Deutschland gespeichert und nur aus dem EWR ausgeliefert. Die Analyse ist je Projekt zunächst aus; ist sie aktiv, fragt ein eigener Dialog im Player nach der Einwilligung. Gespeichert wird sie ohne IP-Adresse.

Übernahme der Entscheidung aus einem vorhandenen Cookie-Banner
Auftragsverarbeitungsvertrag auf Knopfdruck als PDF
Zustimmung zu AGB und AVV mit Version und Datum gespeichert

Datenschutz & AVV auf einen Blick

Und dazu im Detail durchdacht.

Ablauf-Karte
Alle Videos eines Projekts als Kacheln, jede Verbindung als Pfeil. In der Auswertung zeigt sie die Wege, die Zuschauer wirklich gegangen sind.
Hochformat
Eigene Fassungen in 9:16, 3:4 oder 4:5; der Player wählt automatisch die passende.
Player-Design
Farben, Schrift, Bedienelemente, Logo, Poster-Video und Link-Vorschau im eigenen Markenauftritt.
Teilen & Einbetten
Direktlink, Einbettung mit automatischem Format und signierte Vorschau-Links für Entwürfe.
Mediathek
Wiederaufnehmbarer Upload direkt zu Bunny Stream, mit einer eigenen Video-Bibliothek je Konto.
Tarife & Hilfe
Tarifgrenzen in Oberfläche, API und Datenbank, dazu ein Hilfe-Center mit 27 Anleitungen und ein Benutzerhandbuch, auch als PDF.

Technik

Wie es gebaut ist.

KlickPlayer ist eine TypeScript-Anwendung auf Next.js 14 mit App Router: Server-Komponenten rendern die Seiten, Route-Handler stellen interne API, öffentliche REST-API und den MCP-Server bereit. Sie läuft als Docker-Container auf AWS App Runner in Frankfurt.

Dahinter Supabase mit PostgreSQL, Row Level Security auf allen Tabellen und Geschäftsregeln als Trigger direkt in der Datenbank. Sie gelten damit unabhängig vom Zugriffsweg. Der bearbeitbare Entwurf ist von einem veröffentlichten Schnappschuss getrennt, den der Player liest. Videos laufen über Bunny.net Stream, je Kunde mit eigener Bibliothek.

Editor & DashboardReact 18 · shadcn/ui

Player & Einbettungvideo.js · HLS

KI-AssistentenMCP · OAuth 2.1

REST-APIOpenAPI

Next.js 14 · TypeScriptAWS App Runner · Frankfurt

SupabasePostgres · RLS · Auth

Bunny StreamKodierung · HLS

Bunny CDNAuslieferung im EWR

ResendE-Mail aus der EU

Der Stack

Sprache & Framework: TypeScript 5Next.js 14React 18Node.js 24
Oberfläche: Tailwind CSSshadcn/uiRadix UIRechartsLottie
Datenbank & Backend: SupabasePostgreSQL + RLSEdge Functions115 Migrationen
Video: video.js 8HLSBunny StreamTUS-UploadBunny CDN
Hosting & Betrieb: DockerAWS App RunnerAmazon ECRCloudWatch
KI-Schnittstellen: Model Context ProtocolOAuth 2.1REST + OpenAPI
Formulare & Daten: react-hook-formZod 4SheetJSreact-pdfsharp
Tests: VitestPlaywrightResend (E-Mail)

Geprüft & abgesichert

Jede Funktion wird automatisch geprüft, bevor sie live geht. Auch ganze Abläufe wie das Hochladen eines Videos, das Bauen im Editor oder eine Kampagne werden dabei wie von einem echten Nutzer im Browser durchgespielt. So fallen Fehler auf, bevor sie ein Kunde bemerkt.

Zugangsschlüssel werden nur verschlüsselt gespeichert
Schutz vor Missbrauch durch zu viele Anfragen in kurzer Zeit
Datenbank abgesichert über RLS-Policies
Sensible Daten erreichen den Browser gar nicht erst
Eigener Zustimmungsdialog direkt im Video, falls auf der Website kein Cookie-Banner eingerichtet ist
Jeder Kunde hat seinen eigenen, getrennten Bereich für seine Videos

Neugierig, was ich für dich bauen kann?

Lass uns sprechen klickplayer.de Alle Projekte

Ein Video, das Fragen stellt.

Das Video stellt eine Frage.

Der Zuschauer wählt sein Thema.

Der Zuschauer wird zur Anfrage geleitet.

Was es kann.

Interaktivität direkt auf dem Video.

Jeder Zuschauer wird persönlich begrüßt.

Ein Video, viele persönliche Botschaften.

Sehen, was wirkt.

Bedienbar von Claude, ChatGPT und Cursor.

Teil der Architektur, keine Einstellung.

Und dazu im Detail durchdacht.

Ablauf-Karte

Hochformat

Player-Design

Teilen & Einbetten

Mediathek

Tarife & Hilfe

Wie es gebaut ist.

Der Stack

Geprüft & abgesichert