Onboarding

Das Onboarding ist der Vorgang, den Ihre Nutzer/innen durchlaufen, um Ihre App nach der Installation einzurichten. Als erste Interaktion mit Ihrer App muss der Ablauf intuitiv, ausgearbeitet und möglichst unkompliziert sein.

Die erforderlichen Onboarding-Schritte sind für jede App unterschiedlich, aber wir bieten Tools und Best Practices, die Sie dabei unterstützen.

Entwurfsmuster

In unseren Onboarding-Entwurfsmustern zeigen wir Ihnen gängige Szenarien zu Aktivierung, Anmeldung, Weiterleitung und mehr.

Onboarding-Ansicht anzeigen

Nachdem Nutzer/innen Ihre App installiert haben und ins Dashboard gehen, ist es wichtig, dass ihnen als Erstes das Onboarding angezeigt wird. Achten Sie auf Folgendes:

• Erstellen Sie eine Onboarding-Komponente (mit SignInView, wenn ein Anmeldevorgang erforderlich ist).
• Überprüfen Sie in all Ihren seitenspezifischen Ansichten, ob der/die Nutzer/in das Onboarding abgeschlossen hat, wenn die Ansicht zum ersten Mal geladen wird. Zeigen Sie Ihre Onboarding-Komponente entsprechend an. Das kann zum Beispiel so aussehen:
  import {SignInView, ContextView} from '@stripe/ui-extension-sdk/ui';
  import appIcon from './icon.svg';
  
  // This component can be defined in a separate file for reuse between views
  const Onboarding = () => (
    <SignInView
      description="Connect your SuperTodo account to Stripe."
      primaryAction={{label: 'Sign in', href: 'https://supertodo.example.com'}}
      brandColor="#635bff"
      brandIcon={appIcon}
    />
  );
  
  const CustomerDetailView = () => {
    // The definition of "isSignedIn" is dependent upon your app's sign in method
    if (!isSignedIn) {
      return <Onboarding />
    }
  
    return (
      <ContextView title="SuperTodo customer view">
        // your signed-in content here
      </ContextView>
    );
  };

• Führen Sie die gleichen Schritte in der Standardansicht Ihres Dashboards durch. Wenn Sie keine Standardansicht haben, erstellen Sie eine. So wird den Nutzer/innen beim Öffnen der App im Dashboard der richtige Ablauf angezeigt. Wenn Sie die Standardansicht nur für das Onboarding benötigen, können Sie null für die Ansicht zurückgeben, wenn der/die Nutzer/in das Onboarding bereits abgeschlossen hat und das Dashboard die Standard-Schublade des Stripe-Dashboards anzeigt, die Nutzer/innen zu einer seitenspezifischen Ansicht führt. Zum Beispiel:
  import {SignInView} from '@stripe/ui-extension-sdk/ui';
  import appIcon from './icon.svg';
  
  // This component can be defined in a separate file for reuse between views
  const Onboarding = () => (
    <SignInView
      description="Connect your SuperTodo account to Stripe."
      primaryAction={{label: 'Sign in', href: 'https://supertodo.example.com'}}
      brandColor="#635bff"
      brandIcon={appIcon}
    />
  );
  
  const DashboardDefaultView = () => {
    // The definition of "isSignedIn" is dependent upon your app's sign in method
    if (!isSignedIn) {
      return <Onboarding />
    }
  
    return null;
  };

Zero-Touch-Nutzer-Onboarding mit der Stripe-Authentifizierung

Wenn Sie eine App erstellen, die Daten in einem externen Backend speichert und keine Nutzerkonten benötigen, können Sie sich auf die Authentifizierung von Stripe verlassen, um Zero-Touch-Onboarding zu bieten. Bei dieser Methode erfordert Ihre App kein Onboarding und sie kann sofort nach der Installation verwendet werden.

Richten Sie zunächst Ihr Backend so ein, dass es Anfragen über die Nutzeroberfläche Ihrer App authentifiziert. Anschließend können Sie Informationen in Ihrer Datenbank mit einer gesonderten Spalte für die von Stripe bereitgestellte Nutzer-ID bzw. Konto-ID speichern. Wenn Nutzer/innen Ihre App verwenden, werden Sie automatisch im Stripe-Dashboard angemeldet. Eine zusätzliche Authentifizierung entfällt somit.