Ship a Quest onboarding flow without guessing the setup.
This guide covers account setup, templates, editor workflow, React Native and Expo SDK installation, and the production endpoints the current product exposes.
Recommended flow
Sign up, clone a template, customize screens, publish once, and mount the React Native SDK with the generated `projectId` and `quest_live_...` API key.
Need payload details?
Review the dedicated API page for request rules, auth behavior, and example JSON.
Open API ReferenceGetting Started
The fastest path is to create a workspace, start from a template, and only then fine-tune the screens that matter for activation.
Step 1
Create an account
Start with a Quest workspace, then invite the teammate who owns onboarding copy or design reviews. New teams can begin on the free tier.
Step 2
Create a project
Open the dashboard, create a project, and define the onboarding flow you want to ship. Each project becomes one publishable flow for your app.
Step 3
Use a template
Choose a starter template if you want a fast baseline for welcome, feature-tour, or permission-request screens. Clone it, then tailor the content and visual treatment in the editor.
Editor Guide
Customize each screen
Quest supports welcome, feature-highlight, and permission-request screens. Edit copy, CTA labels, background treatments, icons, and layout alignment until the flow matches your product voice.
Reorder the sequence
Arrange screens in the order users should see them. Use concise messaging early, then move users into the product before attention drops.
Preview before publishing
Use the device preview to sanity-check spacing, pacing, and permission timing. Publishing creates or refreshes the public API key your mobile app will request against.
Editor checklist
- Set a clear project name and optional description.
- Use templates for a strong first draft instead of blank-canvas work.
- Keep CTA labels short so they survive smaller device widths.
- Preview permission prompts in context instead of front-loading them.
- Publish after every meaningful content revision so the SDK fetches the latest config.
React Native SDK
Install the package once, then point it at the published project ID and public API key generated by Quest.
Installation
$ npm install @quest-onboarding/react-native-sdkAfter install, publish a project from the Quest editor so you have the values the SDK expects.
import { QuestOnboarding } from "@quest-onboarding/react-native-sdk";export default function App() { return ( <QuestOnboarding projectId="YOUR_PROJECT_ID" apiKey="YOUR_PUBLISHED_API_KEY" onComplete={() => {} } /> );}Typical usage
Mount the SDK near app start, decide when to suppress it for returning users, and use callbacks like `onComplete`, `onSkip`, `onScreenViewed`, and `onEvent` to connect onboarding behavior to analytics or feature flags.
What the SDK fetches
The SDK reads your published project from `GET /api/onboarding/[projectId]`, so every publish updates the JSON the mobile app pulls next.
Expo Integration
Using Quest with Expo
Quest works cleanly inside Expo projects, including Expo Router setups. The SDK is mounted the same way as a standard React Native app: publish a flow in Quest, then render `QuestOnboarding` before the rest of your app.
Prerequisites
- Expo SDK 49+ or Expo Router
- React Native 0.72+
- A published Quest project with a live API key
Common Expo gotchas
- Works with both Expo managed workflow and bare workflow.
- No native modules are required because the SDK is pure JavaScript.
- Compatible with Expo Go for development testing.
Installation
Install the SDK in your Expo app, then publish a Quest project before wiring in `projectId` and `apiKey`.
$ npm install @quest-onboarding/react-native-sdk# or$ yarn add @quest-onboarding/react-native-sdkGetting the projectId
Create your flow in the Quest dashboard, publish it, then open the project in the editor. The SDK Info panel shows the generated `projectId` along with the public `quest_live_...` API key you need to pass into the Expo app.
Republishing keeps the same project wired up while refreshing the onboarding JSON your app fetches from Quest.
Basic usage in an Expo app
import { useState } from "react";import { QuestOnboarding } from "@quest-onboarding/react-native-sdk";export default function App() { const [onboardingComplete, setOnboardingComplete] = useState(false); if (!onboardingComplete) { return ( <QuestOnboarding projectId="your-project-id" apiKey="your-api-key" onComplete={() => setOnboardingComplete(true)} /> ); } return <YourMainApp />;}Using Quest with Expo Router
Add the onboarding gate in your root layout so Quest renders before your routed screens. This keeps the integration centralized in `app/_layout.tsx`.
import { useState } from "react";import { Slot } from "expo-router";import { QuestOnboarding } from "@quest-onboarding/react-native-sdk";export default function RootLayout() { const [onboardingComplete, setOnboardingComplete] = useState(false); if (!onboardingComplete) { return ( <QuestOnboarding projectId="your-project-id" apiKey="your-api-key" onComplete={() => setOnboardingComplete(true)} /> ); } return <Slot />;}For production apps, persist that completion flag so returning users skip the flow after their first session.
API Reference Summary
These are the routes developers usually touch first when they evaluate Quest in a real product flow.
Publish endpoint
POST /api/onboarding/projects/[projectId]/publish
Publishes an editor project and ensures it has a live public API key. Use this from the dashboard when you are ready for the SDK to fetch the latest version.
Template endpoint
GET /api/templates
Lists the available onboarding templates and, when a session is present, returns workspace limits that help decide whether the next clone requires an upgrade.
Delivery endpoint
GET /api/onboarding/[projectId]
Returns the published onboarding JSON your app renders. Authenticate with the project's public API key in the X-Quest-Api-Key header.