Getting Started with OnboardSDK

Setting Up
Configuration
Implementation

Step 1: Setting Up Your Project

To begin, you'll need to set up shadcn/ui in your project:

  1. Initialize shadcn/ui in your project using the following command:
    npx shadcn-ui@latest init
  2. Install the necessary components from shadcn/ui:
    npx shadcn-ui@latest add progress button card

    This will add the Progress, Button, and Card components to your project.

  3. After installation, you can import these components as needed:
    import { Progress } from "@/components/ui/progress"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

These components will be essential for building your onboarding interface with OnboardSDK.

Additional Information

Onboarding Modes and Actions

Modes

  • Brutal Mode: Steps appear instantly. Set "mode": "brutal" in your config file.
  • Smooth Mode: Provides transitions between steps. Set "mode": "smooth" in your config file.

Actions

  • Focus Action: Use "action": "focus" to highlight an element without requiring user interaction.
  • Click Action: Set "action": "click" to require the user to click on the element to proceed to the next step.

Choose the mode and actions that best suit your application's user experience needs.

Best Practices for Effective Onboarding

  • Keep your onboarding steps concise and focused.
  • Use clear and engaging descriptions for each step.
  • Ensure your element IDs match those in your config file.
  • Utilize the "click" action for interactive elements to encourage user engagement.
  • Balance "focus" and "click" actions to create a smooth yet interactive flow.
  • Test your onboarding flow thoroughly with different user scenarios.
  • Gather and incorporate user feedback to continually improve the onboarding experience.