Akce po instalaci a onboarding

Akce po instalaci určují, co se stane bezprostředně po instalaci vaší Stripe App uživatelem. Dobře navržená zkušenost po instalaci provede uživatele nastavením a zvýší míry aktivace.

Typy akcí po instalaci

Stripe podporuje čtyři typy akcí po instalaci, každý konfigurovaný v manifestu aplikace:

1. Odkaz na aplikaci (výchozí)

Otevře aplikaci ve výchozím pohledu zásuvky:

{
  "post_install_action": {
    "type": "default"
  }
}

2. Odkaz na onboarding

Otevře vyhrazený onboardingový pohled aplikace:

{
  "post_install_action": {
    "type": "onboarding"
  }
}

3. Odkaz na nastavení

Otevře pohled nastavení aplikace:

{
  "post_install_action": {
    "type": "settings"
  }
}

4. Odkaz na externí URL

Přesměruje uživatele na externí URL pro nastavení:

{
  "post_install_action": {
    "type": "external",
    "url": "https://app.tajo.io/stripe/setup"
  }
}

Nejlepší postupy pro onboarding

Udělejte ho bez námahy

Minimalizujte počet kroků potřebných k zahájení:

• Předvyplňte informace dostupné z kontextu účtu Stripe
• Používejte rozumné výchozí hodnoty pro možnosti konfigurace
• Umožněte přeskočení volitelných kroků s jasnou cestou k jejich pozdějšímu dokončení
• Zobrazte průběh s indikátory kroků pro víceúrovňové toky

Zpracování vracejících se uživatelů

Když uživatel otevře vaši aplikaci po dokončení onboardingu, detekujte jejich stav a zobrazte příslušný pohled:

const MainView = ({ environment, userContext }: ExtensionContextValue) => {
  const [authState, setAuthState] = useState<'loading' | 'signed-out' | 'onboarding' | 'ready'>('loading');

  useEffect(() => {
    checkUserState().then((state) => {
      setAuthState(state);
    });
  }, []);

  switch (authState) {
    case 'loading':
      return <Spinner label="Loading..." />;
    case 'signed-out':
      return <SignInView onSignInComplete={() => setAuthState('onboarding')} />;
    case 'onboarding':
      return <OnboardingView onComplete={() => setAuthState('ready')} />;
    case 'ready':
      return <DashboardView />;
  }
};