/onboarding, bevor er das Haupt-Dashboard überhaupt zu sehen bekommt — der gesamte Zweck besteht darin, einen QR-Code zu erstellen, bevor Sie sich selbst überlassen werden, um die App zu erkunden.
Der Auslöser dieser Seite (
first_login) ist kontobezogen und nur jemals einmal wahr, sodass er auf dem für die Verifizierung des übrigen Dokumentationsprojekts verwendeten gemeinsam genutzten Testkonto nicht live erneut ausgelöst werden konnte — dieses Konto hatte seinen ersten Login längst abgeschlossen, bevor diese Seite geschrieben wurde. Jeder Schritt unten wurde live verifiziert, indem direkt zu /onboarding navigiert wurde (die Route selbst hat keine weitere Sperre außer der Anmeldung) und der Ablauf von Anfang bis Ende durchlaufen wurde; nur das automatische Weiterleitungsverhalten beim ersten Login selbst wird aus dem Quellcode dokumentiert, nicht beobachtet.Wer dies sieht, und warum
Gemäß der eigenen Routing-Logik der App (lib/next-path.ts) gilt der Assistent nur für einen tatsächlich neuen Konto-Owner — ein Teammitglied, das eine Einladung als geteilter Nutzer annimmt, löst beim ersten Login ebenfalls dasselbe zugrunde liegende first_login-Flag aus, ist davon jedoch bewusst ausgenommen, da der Assistent Berechtigungen voraussetzt (wie das Erstellen eines QR-Codes), die ein Viewer oder eine andere eingeschränkte Rolle möglicherweise nicht besitzt. Ein neu eingeladenes Teammitglied gelangt stattdessen direkt zum Dashboard.
Ist die Profilvervollständigung noch ausstehend, hat diese Sperre Vorrang — der Assistent erscheint erst, nachdem Ihr Profil vollständig ist.
Schritt 1 — Choose
Der Assistent öffnet mit einer personalisierten Begrüßung (“Welcome, {name}! Let’s create your first QR Code.”) und drei Ausgangspunkten, die denselben drei Optionen entsprechen, die überall sonst in der App verfügbar sind (siehe Quick Code vs. full Page):
Schritt 1 des Onboarding-Assistenten — Auswahl eines Ausgangspunkts
- Quick Code — ein direkt ausgeführter QR-Code, z. B. Website URL.
- Choose a Template (mit der Markierung Popular) — ein vorgestaltetes Seitenlayout (Business Card, Custom Page und mehr).
- Build with AI (mit der Markierung AI-Powered) — beschreiben Sie, was Sie benötigen, und lassen Sie KI den Seiteninhalt generieren.
Schritt 2 — Create
Die Auswahl eines Ausgangspunkts öffnet dessen typspezifisches Erstellungsformular. Für Website URL (der hier verifizierte Pfad) ist dies ein einzelnes Feld, das nach der Ziel-URL fragt, mit einer live gerenderten QR-Code-Vorschau rechts, während Sie tippen:
Schritt 2 — Eingabe einer Website-URL mit Live-QR-Code-Vorschau
Schritt 3 — Configure
Als Nächstes benennen Sie den QR-Code und wählen dessen Kurz-URL:
Schritt 3 — Benennung des QR-Codes und Konfiguration seiner Kurz-URL
- QR Code name — standardmäßig “My QR Code”, wenn leer gelassen.
- Short URL — standardmäßig
scnv.iomit automatisch generiertem Slug; wählen Sie Customize, um einen eigenen festzulegen. - GPS location tracking — ein optionaler Schalter zum Erfassen des genauen Scan-Standorts (erfordert die Zustimmung des Besuchers zum Zeitpunkt des Scans).
Schritt 4 — Design & Finish
Der letzte Schritt bestätigt den Erfolg mit einer feiernden Konfetti-Animation und Ihrem fertigen, scanbaren QR-Code:![Onboarding-Assistent Schritt 4, Design and Finish, mit einer Konfetti-Animation, der Überschrift 'Congratulations, [name]! Your QR Code is ready.', einer optionalen Designauswahl, einem echten QR-Code-Bild, den Schaltflächen Test your QR und Download QR sowie einer Schaltfläche Continue to plans](https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/onboarding/first-run-wizard/step4-design-finish.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=71d528ac836ea23c06ab8558e9447cd6)
Schritt 4 — der fertige QR-Code, bereit zum Testen, Herunterladen oder Anpassen
- Choose a design (optional) — vor dem Herunterladen einen visuellen Stil anwenden.
- Test your QR — öffnet das Ziel in einem neuen Tab, genauso wie es ein Scan tun würde.
- Download QR — lädt das QR-Code-Bild herunter.
- Continue to plans — die abschließende Aktion, die Sie in die Hauptanwendung führt (ein Hinweis auf dem Bildschirm erinnert Sie daran, dass das Design später auch vom Dashboard aus geändert werden kann).
Weiterführende Links
- Quick Code vs. full Page — dieselben drei Ausgangspunkte, jederzeit verfügbar unter
/qr/create, nicht nur während des Onboardings. - Classic to New UI — eine separate, einmalige Entscheidung auf Kontoebene, unabhängig von diesem Assistenten.