OnboardSDK Documentation

A powerful React component for building interactive onboarding experiences

Implementation

To use OnboardSDK in your React application, follow these steps:

Purchase and log in to your account from our website to get the OnboardSDK component.
Place the OnboardSDK component file in your project's components directory.
Import and use the component in your React application:

import React from 'react'
import { Onboarding } from './components/onboarding'
import { useUser } from '@clerk/nextjs'

export default function App() {
  const { isLoaded, isSignedIn } = useUser()
  const handleOnboardingComplete = () => {
    console.log('Onboarding completed')
  }

  if (!isLoaded) return <div>Loading...</div>

  return (
    <>
      {isSignedIn && (
        <Onboarding
          onComplete={handleOnboardingComplete}
          configUrl="/onboard-config.json"
        />
      )}
      <div id="welcome">
        <h1>Welcome to Our App</h1>
      </div>
      <div id="feature-overview">
        <h2>Our Features</h2>
        <ul>
          <li>Feature 1</li>
          <li>Feature 2</li>
          <li>Feature 3</li>
        </ul>
      </div>
    </>
  )
}

Configuration

OnboardSDK uses a JSON configuration file to define the onboarding steps. Create an onboard-config.json file in your public folder:

{
  "mode": "smooth",
  "steps": [
    {
      "id": "welcome",
      "title": "Welcome to Our App",
      "description": "Let's get you started with the basics.",
      "action": "focus",
      "arrowPosition": "bottom",
      "className": "custom-welcome-class"
    },
    {
      "id": "feature-overview",
      "title": "Feature Overview",
      "description": "Click here to see our main features.",
      "action": "click",
      "arrowPosition": "top",
      "className": "custom-feature-class"
    },
    {
      "id": "profile-setup",
      "title": "Set Up Your Profile",
      "description": "Let's personalize your experience.",
      "action": "focus",
      "arrowPosition": "left",
      "className": "custom-profile-class"
    },
    {
      "id": "final-step",
      "title": "You're All Set!",
      "description": "Click here to start using the app.",
      "action": "click",
      "arrowPosition": "right",
      "className": "custom-final-class"
    }
  ]
}

Configuration Options

Option	Description
mode	"smooth" for animated transitions, "brutal" for instant changes
steps	Array of step objects defining the onboarding flow

Step Object Properties

Property	Description
id	Unique identifier for the step, matching an element ID in your app
title	Title of the step
description	Detailed description of the step
action	"focus" to highlight, "click" to click + highlight interaction (just add an onclick on your element)
arrowPosition	Position of the arrow pointing to the element: "top", "bottom", "left", or "right"
className	Custom CSS class for additional styling of the step

Props

The OnboardSDK component accepts the following props:

Prop	Type	Description
onComplete	function	Callback function called when onboarding is completed
configUrl	string	URL of the JSON configuration file
configString?	string	JSON string containing the configuration (alternative to configUrl) and (optionnal)

Join Our Discord Community

Connect with other OnboardSDK users, get help, and stay updated on the latest features and announcements.