OnRampOnRamp/Docs

Getting started

Install OnRamp, track onboarding milestones, and create your funnel with the CLI or dashboard.

Prerequisites

  • A React Native, Expo, Flutter, iOS (Swift), React, Next.js, or web project
  • An OnRamp account - sign up free
  • An API key from your app's Settings page in the dashboard

Step 1 - Install the SDK

Pick the package for your platform:

bash
# React Native / Expo
npm install @onramp-sdk/react-native

# React / Next.js
npm install @onramp-sdk/react

# Web (Vue, Svelte, Angular, plain JS)
npm install @onramp-sdk/web@0.7.4

For Flutter see the Flutter SDK page. For native iOS see the iOS SDK page.

Step 2 - Initialise the SDK

Call OnRamp.init() once at app startup with your API key - find it in Dashboard → your app → Settings.

tsx
// App.tsx
import { useEffect } from 'react'
import { OnRamp } from '@onramp-sdk/react-native'

export default function App() {
  useEffect(() => {
    OnRamp.init({ apiKey: 'onr_xxxxxxxxxxxx' })
  }, [])

  return <YourApp />
}

Where to find your API key

In the OnRamp dashboard, open your app and go to Settings. Create an API key and copy it. Keys look like onr_a3f8d2e1b9c4.... Create a separate app in the dashboard for development so test events stay out of your production data.

Step 3 - Track your first milestone

Call OnRamp.step() at each meaningful moment in your onboarding flow. A step is any user action you want to measure - signing up, completing a profile, creating their first item.

tsx
import { OnRamp } from '@onramp-sdk/react-native'

function SignupScreen() {
  async function handleSignup(email: string, password: string) {
    await createAccount(email, password)

    // Track the milestone - that's it
    OnRamp.step('account_created')
  }
}

You can attach custom properties to any step:

tsx
OnRamp.step('account_created', {
  properties: {
    plan: 'trial',
    signup_method: 'email',
  },
})

Step 4 - Define your funnel

The SDK records milestones, while OnRamp stores their funnel order. Create the funnel with the CLI or in the dashboard. Coding agents should use the CLI and complete this step instead of stopping after instrumentation.

A minimal onboarding funnel might look like:

StepName to use
App openedapp_opened
Signup startedsignup_started
Account createdaccount_created
Profile set upprofile_setup
First action takenfirst_action
bash
npx --yes @onramp-sdk/cli@latest whoami
npx --yes @onramp-sdk/cli@latest funnels create \
  --app-id <project-id> \
  --name "Activation" \
  --steps '[{"step_name":"app_opened","display_label":"App opened"},{"step_name":"signup_started","display_label":"Signup started"},{"step_name":"account_created","display_label":"Account created"},{"step_name":"profile_setup","display_label":"Profile set up"},{"step_name":"first_action","display_label":"First action taken"}]'
npx --yes @onramp-sdk/cli@latest funnels get Activation --app-id <project-id>

If whoami says the CLI is not connected, run npx --yes @onramp-sdk/cli@latest login and approve the browser authorization. For the visual route, open Funnels in the dashboard and click New funnel.

OnRamp matches events to funnel steps by the exact string name you pass to OnRamp.step(). Capitalisation and spaces matter - account_created and Account Created are different steps.

Step 5 - Open your dashboard

Navigate to your funnel. Within a few seconds of your first event arriving, you will see:

  • Conversion funnel - percentage through each step
  • Daily trend - visitors and conversion rate over time
  • Drop-off - which step loses the most users
  • Session timeline - individual user journeys

Next steps