Skip to main content
Create your first flow in Flowboard Studio, connect it to your app, and launch it with the SDK.
This guide keeps the same implementation path most teams follow:
  • Create an app in Flowboard Studio
  • Build and publish a flow
  • Generate a read-only API key
  • Install the SDK
  • Initialize Flowboard in your app
  • Launch the flow and verify the integration

​
Before you begin

Make sure you have:
  • Access to Flowboard Studio
  • An existing mobile app in React Native, Expo development build, Flutter, native iOS, or native Android
  • Your app identifier ready:
    • iOS: bundle ID
    • Android: package name
  • Permission to add a new SDK dependency to your app
Expo Go is not supported because Flowboard uses native modules. Use an Expo development build, expo prebuild, or EAS Build instead.

​
What you will set up

By the end of this guide, you will have:
  • One published flow in Flowboard Studio
  • One API key with read access for flows
  • Flowboard initialized in your app
  • A button or trigger that launches the flow

​
1. Create an app in Flowboard Studio

Open Flowboard Studio and create a new app. When you create the app, add the identifiers you want Flowboard to target. This ensures the correct configuration is resolved when your app requests a flow. Recommended details to configure early:
  • App name
  • iOS bundle ID
  • Android package name
  • Environment or workspace conventions your team uses

​
2. Create and publish your first flow

Inside your app workspace in Studio:
  1. Create a new flow.
  2. Start from AI, a template, or a blank flow.
  3. Add the screens and actions you need.
  4. Review the default audience or distribution rules.
  5. Publish the flow.
If you want the fastest path to a working demo, start with a template, keep the audience broad, and publish a simple 2 to 4 step flow first.
Before moving on, confirm:
  • The flow is in published state
  • The flow is assigned to an audience or otherwise available for launch
  • You know whether you want to launch the default flow or a specific flow ID

​
3. Create an API key

Your app needs an API key so the SDK can retrieve published Flowboard data. To generate it:
  1. Open your app in Studio.
  2. Go to the app configuration page.
  3. Scroll to the API keys section.
  4. Create a new key for the mobile app integration.
Use the smallest scope possible. For most mobile integrations, a read-only key for flows is the correct default.
Flowboard API key screen
Store the key securely and use environment-based configuration for production apps.

​
4. Install the SDK

Choose the setup that matches your app. 
# Install the SDK
npx expo install flowboard-react

# Install and configure native dependencies
npx --package flowboard-react flowboard-setup --yes

​
Native iOS

The current native iOS SDK is integrated as a local Swift Package from the Flowboard suite repo. In Xcode:
  1. Open your app project.
  2. Go to File -> Add Package Dependencies....
  3. Click Add Local....
  4. Select the flowboard-ios folder.
  5. Add:
    • FlowboardUIKit for UIKit apps
    • FlowboardSwiftUI if you also need the SwiftUI wrapper
If your app uses Package.swift, add the local dependency: 
dependencies: [
  .package(path: "../flowboard-ios")
],
targets: [
  .target(
    name: "YourApp",
    dependencies: [
      .product(name: "FlowboardUIKit", package: "flowboard-ios"),
      .product(name: "FlowboardSwiftUI", package: "flowboard-ios")
    ]
  )
]

​
Native Android

The current native Android SDK is integrated as sibling Gradle modules from the Flowboard suite repo. In settings.gradle.kts: 
include(":flowboard-core")
include(":flowboard-view")
include(":flowboard-compose")

project(":flowboard-core").projectDir = file("../flowboard-android/flowboard-core")
project(":flowboard-view").projectDir = file("../flowboard-android/flowboard-view")
project(":flowboard-compose").projectDir = file("../flowboard-android/flowboard-compose")
In your app module build.gradle.kts: 
dependencies {
  implementation(project(":flowboard-view"))
  implementation(project(":flowboard-compose"))
}
If your app only uses the Android View system, implementation(project(":flowboard-view")) is enough.
After installation, rebuild the app so native dependencies are compiled correctly.

​
5. Initialize Flowboard

Initialize Flowboard as early as possible during app startup, and wrap your app with the provider when using the React Native SDK. 
// app/_layout.tsx
import { Stack } from 'expo-router';
import { Flowboard, FlowboardProvider } from 'flowboard-react';

Flowboard.init({
  apiToken: 'YOUR_API_TOKEN',
  debug: true,
});

export default function RootLayout() {
  return (
    <FlowboardProvider>
      <Stack />
    </FlowboardProvider>
  );
}
Set debug: false in production.

​
6. Launch your flow

Add a simple trigger in your app so you can confirm the integration end to end. 
import { Button } from 'react-native';
import { Flowboard } from 'flowboard-react';

const startFlow = async () => {
  try {
    await Flowboard.launchOnboarding({
      onOnboardEnd: (formData) => {
        console.log('Flow finished:', formData);
      },
    });
  } catch (error) {
    console.error('Failed to launch Flowboard:', error);
  }
};

export function LaunchFlowButton() {
  return <Button title="Start flow" onPress={startFlow} />;
}
If your setup requires launching a specific published flow, use the flow ID from Studio instead of the default launcher.

​
7. Verify the integration

Run the app and trigger the flow. You should verify that:
  • The SDK initializes without errors
  • The published flow opens in the app
  • Screen transitions work as expected
  • Completion callbacks fire at the end of the flow

​
Troubleshooting

Check that:
  • Your API token is valid
  • The flow is published
  • The flow is assigned to an audience that matches your device or app context
  • Your app was rebuilt after installing the SDK
Clean the generated native project and reinstall dependencies, then rebuild:
rm -rf ios/build
rm -rf node_modules
npm install
npx expo prebuild --clean
npx expo run:ios
Make sure you are not testing inside Expo Go, and confirm that all native dependencies required by flowboard-setup were installed successfully.

​
Next steps

After your first successful launch, the next common steps are:
  • Refine the audience targeting
  • Add analytics or completion tracking
  • Launch a specific flow by ID
  • Create variants for experimentation
  • Add custom native screens where needed
Need help with setup or migration? Contact greg@flow-board.co.