{"id":969,"date":"2026-05-02T13:00:00","date_gmt":"2026-05-02T18:00:00","guid":{"rendered":"https:\/\/tolinku.com\/blog\/?p=969"},"modified":"2026-03-07T04:46:04","modified_gmt":"2026-03-07T09:46:04","slug":"invite-link-onboarding","status":"publish","type":"post","link":"https:\/\/tolinku.com\/blog\/invite-link-onboarding\/","title":{"rendered":"Invite Link Onboarding: From Invitation to Active User"},"content":{"rendered":"\n

Invited users are different from organic users. They already have context: someone they know (or a team they belong to) sent them a link with a specific purpose. The onboarding flow should reflect that context instead of treating them like a stranger discovering your app for the first time.<\/p>\n\n\n\n

For personalization strategies, see Personalized Onboarding Flows with Deep Link Data<\/a>. For deferred deep linking mechanics, see Deferred Deep Linking: How It Works<\/a>.<\/p>\n\n\n\n

Types of Invite Links<\/h2>\n\n\n\n

Different invitation types require different onboarding flows:<\/p>\n\n\n\n

\n\n\n\n\n\n\n\n
Invite Type<\/th>\nContext<\/th>\nOnboarding Goal<\/th>\n<\/tr>\n<\/thead>\n
Team invite<\/td>\nWorkspace name, role, inviter<\/td>\nJoin the team, skip product education<\/td>\n<\/tr>\n
Friend referral<\/td>\nReferrer name, reward<\/td>\nCreate account, claim reward (see How Referral Deep Links Work<\/a>)<\/td>\n<\/tr>\n
Content share<\/td>\nShared item (photo, playlist, doc)<\/td>\nView shared content, then sign up<\/td>\n<\/tr>\n
Collaboration invite<\/td>\nProject, task, or document<\/td>\nAccess the shared item, contribute<\/td>\n<\/tr>\n
Event invite<\/td>\nEvent details, date, host<\/td>\nRSVP, add to calendar<\/td>\n<\/tr>\n<\/tbody><\/table><\/figure>\n\n\n\n

Implementation Pattern<\/h2>\n\n\n\n

Step 1: Generate the Invite Link<\/h3>\n\n\n\n
async function createInviteLink(inviter, inviteType, metadata) {\n  const link = await Tolinku.createLink({\n    path: `\/invite\/${inviteType}`,\n    params: {\n      inviter_id: inviter.id,\n      inviter_name: inviter.firstName,\n      type: inviteType,\n      ...metadata, \/\/ team_id, project_id, event_id, etc.\n    },\n    ogTitle: `${inviter.firstName} invited you to ${getInviteTitle(inviteType, metadata)}`,\n    ogDescription: getInviteDescription(inviteType, metadata),\n  });\n\n  return link.url;\n}\n\n\/\/ Team invite\nconst teamLink = await createInviteLink(user, 'team', {\n  team_id: team.id,\n  team_name: team.name,\n  role: 'member',\n});\n\n\/\/ Content share\nconst shareLink = await createInviteLink(user, 'share', {\n  content_type: 'playlist',\n  content_id: playlist.id,\n  content_name: playlist.name,\n});\n<\/code><\/pre>\n\n\n\n
Step 2: Capture Invite Context on First Launch<\/h3>\n\n\n\n
async function handleFirstLaunch() {\n  const deferred = await Tolinku.checkDeferredLink();\n\n  if (deferred && deferred.path.startsWith('\/invite\/')) {\n    const params = deferred.params;\n\n    inviteStore.set({\n      type: params.type,\n      inviterId: params.inviter_id,\n      inviterName: params.inviter_name,\n      teamId: params.team_id,\n      contentId: params.content_id,\n      timestamp: Date.now(),\n    });\n\n    return navigateToInviteOnboarding(params.type);\n  }\n\n  return navigateToDefaultOnboarding();\n}\n<\/code><\/pre>\n\n\n\n
Step 3: Route to the Right Flow<\/h3>\n\n\n\n
function navigateToInviteOnboarding(inviteType) {\n  switch (inviteType) {\n    case 'team':\n      return navigation.navigate('TeamInviteOnboarding');\n    case 'share':\n      return navigation.navigate('SharedContentView');\n    case 'referral':\n      return navigation.navigate('ReferralWelcome');\n    case 'collab':\n      return navigation.navigate('CollabOnboarding');\n    default:\n      return navigation.navigate('DefaultOnboarding');\n  }\n}\n<\/code><\/pre>\n\n\n\n
Team Invite Onboarding<\/h2>\n\n\n\n
Team invitations are the most common invite type for B2B and collaboration apps. The invitee already knows the product's purpose (their teammate uses it), so the onboarding should focus on getting them into the workspace quickly.<\/p>\n\n\n\n
Flow Design<\/h3>\n\n\n\n
Standard onboarding (6 steps):<\/strong><\/p>\n\n\n\n
    \n
  1. Welcome screen<\/li>\n
  2. Feature tour<\/li>\n
  3. Account creation<\/li>\n
  4. Profile setup<\/li>\n
  5. Preferences<\/li>\n
  6. Dashboard<\/li>\n<\/ol>\n\n\n\n
    Team invite onboarding (3 steps):<\/strong><\/p>\n\n\n\n
      \n
    1. "Alex invited you to join Design Team" (with team context)<\/li>\n
    2. Account creation (email pre-filled if included in invite)<\/li>\n
    3. Team workspace (already joined)<\/li>\n<\/ol>\n\n\n\n
      You can cut the flow in half because the invitation provides the context that the standard flow tries to establish.<\/p>\n\n\n\n
      Implementation<\/h3>\n\n\n\n
      function TeamInviteOnboarding({ invite }) {\n  const [step, setStep] = useState(0);\n\n  const steps = [\n    <TeamWelcome\n      inviterName={invite.inviterName}\n      teamName={invite.teamName}\n      role={invite.role}\n    \/>,\n    <AccountCreation\n      prefillEmail={invite.email}\n      teamContext={invite.teamName}\n    \/>,\n    \/\/ Skip feature tour, preferences, etc.\n    \/\/ User lands directly in the team workspace\n  ];\n\n  return (\n    <OnboardingContainer\n      steps={steps}\n      currentStep={step}\n      onNext={() => {\n        if (step === steps.length - 1) {\n          joinTeamAndNavigate(invite.teamId);\n        } else {\n          setStep(step + 1);\n        }\n      }}\n    \/>\n  );\n}\n\nasync function joinTeamAndNavigate(teamId) {\n  await api.joinTeam(teamId);\n  navigation.reset({ routes: [{ name: 'TeamWorkspace', params: { teamId } }] });\n}\n<\/code><\/pre>\n\n\n\n
      Auto-Join vs. Approval<\/h3>\n\n\n\n
      Decide whether invited users join automatically or need approval:<\/p>\n\n\n\n
      async function processTeamJoin(userId, invite) {\n  const team = await getTeam(invite.teamId);\n\n  if (team.autoApproveInvites) {\n    \/\/ Direct join\n    await addTeamMember(team.id, userId, invite.role);\n    return { status: 'joined', teamId: team.id };\n  }\n\n  \/\/ Approval required\n  await createJoinRequest(team.id, userId, invite.inviterId);\n  return { status: 'pending_approval', teamId: team.id };\n}\n<\/code><\/pre>\n\n\n\n
      Content Share Onboarding<\/h2>\n\n\n\n
      When someone shares content (a photo album, playlist, document, or product), the recipient's primary intent is to view that content. Account creation is secondary.<\/p>\n\n\n\n
      Show Content First, Ask for Account Later<\/h3>\n\n\n\n
      function SharedContentOnboarding({ invite }) {\n  const [hasViewed, setHasViewed] = useState(false);\n\n  if (hasViewed === false) {\n    return (\n      <ContentPreview\n        contentType={invite.contentType}\n        contentId={invite.contentId}\n        sharedBy={invite.inviterName}\n        onView={() => setHasViewed(true)}\n        onSignUp={() => navigation.navigate('QuickSignUp')}\n      \/>\n    );\n  }\n\n  return (\n    <ContentEngagement\n      prompt={`Want to save this ${invite.contentType}? Create a free account.`}\n      onSignUp={() => navigation.navigate('QuickSignUp', { returnTo: invite.contentId })}\n      onSkip={() => navigation.navigate('Browse')}\n    \/>\n  );\n}\n<\/code><\/pre>\n\n\n\n
      The key principle: let them see what was shared before asking for anything. A user who sees value in the content is far more likely to create an account than one who hits a signup wall immediately.<\/p>\n\n\n\n
      Gated vs. Ungated Content<\/h3>\n\n\n\n
      \n\n\n\n\n\n\n\n
      Content Type<\/th>\nShow Without Account?<\/th>\nWhy<\/th>\n<\/tr>\n<\/thead>\n
      Public post\/photo<\/td>\nYes<\/td>\nLow barrier, builds trust<\/td>\n<\/tr>\n
      Playlist\/collection<\/td>\nPreview (first 3 items)<\/td>\nTease value, encourage signup<\/td>\n<\/tr>\n
      Document\/file<\/td>\nTitle + preview<\/td>\nSecurity concern if fully open<\/td>\n<\/tr>\n
      Private group content<\/td>\nNo (require signup)<\/td>\nPrivacy of group members<\/td>\n<\/tr>\n
      Paid content<\/td>\nTeaser only<\/td>\nBusiness model requires account<\/td>\n<\/tr>\n<\/tbody><\/table><\/figure>\n\n\n\n
      Acknowledge the Inviter<\/h2>\n\n\n\n
      Invited users arrive with a social connection. Use it throughout onboarding.<\/p>\n\n\n\n
      Welcome Screen Copy<\/h3>\n\n\n\n
      Instead of a generic "Welcome to [App]," reference the invitation:<\/p>\n\n\n\n
      function getWelcomeMessage(invite) {\n  switch (invite.type) {\n    case 'team':\n      return {\n        headline: `${invite.inviterName} invited you to ${invite.teamName}`,\n        subtext: `Join your team on [App] to collaborate in real time.`,\n      };\n    case 'share':\n      return {\n        headline: `${invite.inviterName} shared something with you`,\n        subtext: `Open [App] to view it.`,\n      };\n    case 'referral':\n      return {\n        headline: `${invite.inviterName} thinks you'll love [App]`,\n        subtext: `Sign up and you both get a reward.`,\n      };\n    default:\n      return {\n        headline: `You've been invited to [App]`,\n        subtext: `Create your account to get started.`,\n      };\n  }\n}\n<\/code><\/pre>\n\n\n\n
      Social Proof Throughout<\/h3>\n\n\n\n
      Show the inviter's presence during onboarding steps:<\/p>\n\n\n\n