Screens

Manage onboarding screen templates

GET /api/screens

Screens

cURL

curl --request GET \
  --url https://api.example.com/api/screens \
  --header 'Content-Type: application/json' \
  --data '
{
  "flow_id": "<string>",
  "type": "<string>",
  "content": {},
  "order": 123,
  "settings": {},
  "screen_order": [
    {}
  ]
}
'

{
  "success": true,
  "data": [
    {
      "id": "template_welcome_1",
      "type": "welcome",
      "name": "Simple Welcome",
      "category": "onboarding",
      "preview_url": "/templates/welcome-1.png",
      "default_content": {
        "title": "Welcome to {{app_name}}",
        "subtitle": "Your journey starts here",
        "image_url": "/images/welcome.png",
        "button_text": "Get Started"
      }
    },
    {
      "id": "template_feature_1",
      "type": "feature",
      "name": "Feature Grid",
      "category": "onboarding",
      "preview_url": "/templates/feature-1.png",
      "default_content": {
        "title": "Key Features",
        "features": [
          {
            "icon": "star",
            "title": "Feature 1",
            "description": "Description here"
          }
        ]
      }
    }
  ]
}

Screen Types

OnboardSync provides several pre-built screen types:

Type	Description
welcome	Introduction screen with title, subtitle, and image
feature	Highlight key features with icons and descriptions
permissions	Request user permissions (notifications, location, etc.)
signup	Account creation or sign-in screen
custom	Fully customizable screen with HTML content

List Screen Templates

Get available screen templates.

type · string

Filter by screen type

category · string

Filter by category: onboarding, permissions, account

{
  "success": true,
  "data": [
    {
      "id": "template_welcome_1",
      "type": "welcome",
      "name": "Simple Welcome",
      "category": "onboarding",
      "preview_url": "/templates/welcome-1.png",
      "default_content": {
        "title": "Welcome to {{app_name}}",
        "subtitle": "Your journey starts here",
        "image_url": "/images/welcome.png",
        "button_text": "Get Started"
      }
    },
    {
      "id": "template_feature_1",
      "type": "feature",
      "name": "Feature Grid",
      "category": "onboarding",
      "preview_url": "/templates/feature-1.png",
      "default_content": {
        "title": "Key Features",
        "features": [
          {
            "icon": "star",
            "title": "Feature 1",
            "description": "Description here"
          }
        ]
      }
    }
  ]
}

---

Get Screen

Get details for a specific screen.

id · string · required

The screen ID

{
  "success": true,
  "data": {
    "id": "screen_abc123",
    "flow_id": "flow_xyz789",
    "type": "welcome",
    "order": 0,
    "content": {
      "title": "Welcome to MyApp",
      "subtitle": "The best app for productivity",
      "image_url": "https://cdn.onboardsync.com/images/welcome.png",
      "button_text": "Continue",
      "skip_button": true
    },
    "settings": {
      "duration": null,
      "transition": "slide",
      "background_color": "#FFFFFF"
    },
    "created_at": "2024-01-15T10:30:00Z",
    "updated_at": "2024-01-20T14:45:00Z"
  }
}

---

Create Screen

Add a new screen to a flow.

flow_id · string · required

The flow ID to add this screen to

type · string · required

Screen type: welcome, feature, permissions, signup, custom

content · object · required

Screen content based on type

order · number

Position in the flow (auto-assigned if not provided)

settings · object

Additional screen settings

Content Structure by Type

Welcome Screen

{
  "type": "welcome",
  "content": {
    "title": "Welcome!",
    "subtitle": "Get started with our app",
    "image_url": "/images/welcome.png",
    "button_text": "Continue",
    "skip_button": true
  }
}

Feature Screen

{
  "type": "feature",
  "content": {
    "title": "Key Features",
    "subtitle": "What you can do",
    "features": [
      {
        "icon": "star",
        "title": "Feature 1",
        "description": "Amazing feature description"
      },
      {
        "icon": "heart",
        "title": "Feature 2",
        "description": "Another great feature"
      }
    ],
    "button_text": "Next"
  }
}

Permissions Screen

{
  "type": "permissions",
  "content": {
    "title": "Enable Notifications",
    "subtitle": "Stay updated with important alerts",
    "permissions": ["notifications"],
    "icon": "bell",
    "button_text": "Enable",
    "skip_button_text": "Maybe Later"
  }
}

{
  "success": true,
  "data": {
    "id": "screen_new123",
    "flow_id": "flow_xyz789",
    "type": "welcome",
    "order": 2,
    "content": {
      "title": "Welcome!",
      "subtitle": "Get started with our app",
      "image_url": "/images/welcome.png",
      "button_text": "Continue"
    },
    "created_at": "2024-01-25T12:00:00Z"
  }
}

---

Update Screen

Update an existing screen.

id · string · required

The screen ID to update

content · object

Updated screen content

order · number

New position in the flow

settings · object

Updated screen settings

---

Delete Screen

Remove a screen from a flow.

id · string · required

The screen ID to delete

Deleting a screen will automatically reorder remaining screens in the flow.

---

Reorder Screens

Update the order of screens in a flow.

flow_id · string · required

The flow ID

screen_order · array · required

Array of screen IDs in the desired order

{
  "success": true,
  "message": "Screens reordered successfully"
}

---

Upload Screen Image

Upload an image for a screen.

id · string · required

The screen ID

image · file · required

Image file (JPEG, PNG, GIF, WebP). Max size: 5MB

{
  "success": true,
  "data": {
    "image_url": "https://cdn.onboardsync.com/images/abc123.png",
    "width": 1080,
    "height": 1920,
    "size_bytes": 245789
  }
}

---

Code Examples

JavaScript

// Add multiple screens to a flow
const addOnboardingScreens = async (flowId) => {
  const screens = [
    {
      type: 'welcome',
      content: {
        title: 'Welcome to MyApp',
        subtitle: 'Let\'s get you started',
        image_url: '/images/welcome.png',
        button_text: 'Begin'
      }
    },
    {
      type: 'feature',
      content: {
        title: 'Powerful Features',
        features: [
          {
            icon: 'rocket',
            title: 'Fast Performance',
            description: 'Lightning quick response times'
          },
          {
            icon: 'shield',
            title: 'Secure',
            description: 'Your data is always protected'
          },
          {
            icon: 'star',
            title: 'Easy to Use',
            description: 'Intuitive interface design'
          }
        ],
        button_text: 'Continue'
      }
    },
    {
      type: 'permissions',
      content: {
        title: 'Stay Updated',
        subtitle: 'Get notified about important updates',
        permissions: ['notifications'],
        icon: 'bell',
        button_text: 'Enable Notifications',
        skip_button_text: 'Not Now'
      }
    }
  ];

  const promises = screens.map((screen, index) => 
    fetch('https://onboardsync.vercel.app/api/screens', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        flow_id: flowId,
        ...screen,
        order: index
      })
    })
  );

  return Promise.all(promises);
};