Creating Your First Story

Create your first in-app Story using AI generation or from scratch.

Overview

This guide walks you through creating your first Story. Snoopr offers two ways to create Stories:

  • Generate with AI (Recommended) - Describe your app and AI creates the screens for you
  • Start from scratch - Build each screen manually in the visual editor

Both methods lead to the same editor where you can customize your Story.

Prerequisites

Choose Your Creation Method

When you click "Create Story" in the dashboard, you'll see two options:

  • Generate with AI - Best for first-time users. Describe your app and AI builds a complete onboarding flow in minutes.
  • Start from scratch - Best when you have a specific design in mind or want full control from the start.

The AI story generator creates a complete onboarding flow through a simple chat conversation.

Step 1: Open the AI Generator

  • Log in to your Snoopr dashboard
  • Select your app from the dropdown in the top left
  • Click Stories in the navigation
  • Click Create Story
  • Select Generate with AI

Step 2: Describe Your App

The AI will ask: "What kind of app or product is this for?" Type a brief description like "A fitness tracking app" or "An e-commerce marketplace".

Step 3: Select Key Features

Based on your app type, the AI suggests relevant features to highlight. Select the ones you want in your onboarding:

  • Tap to select multiple features
  • You can also type custom features
  • Choose 2-5 features for best results

Step 4: Choose Number of Screens

Select how many screens you want:

  • 3 screens - Quick, focused onboarding
  • 4 screens - Balanced coverage
  • 5 screens - Comprehensive tour

Step 5: Select Theme Mode

Choose the appearance modes your Story should support:

  • Light - Light mode only
  • Dark - Dark mode only
  • Both - Supports both (recommended for most apps)

Step 6: Select Theme (Optional)

If you've created custom brand themes, select which theme to use. Otherwise, the default theme is applied automatically. For "Both" mode, you'll select a theme for light mode, then one for dark mode.

Step 7: Review the Plan

The AI shows your screen plan - a preview of each screen's purpose. Click "Looks good" to generate the screens, or "Try different" to regenerate with a new approach.

Step 8: Wait for Generation

The AI generates each screen with headlines, body text, suggested images, button labels, and proper positioning. This takes about 10-30 seconds.

Currently, AI generation focuses on these core elements. The Snoopr team is working on expanding AI capabilities to support more element types and customization options.

Step 9: Edit and Publish

Once generated, you're in the Story editor where you can fine-tune text and positioning, swap images, adjust colors, and add elements from the element library. When you're satisfied with your Story, publish it to go live.

Option B: Start from Scratch

Prefer full control? Create your Story manually.

Step 1: Open the Story Editor

  • Log in to your Snoopr dashboard
  • Select your app from the dropdown in the top left
  • Click Stories in the navigation
  • Click Create Story
  • Select Start from scratch
  • Choose your theme mode (Light, Dark, or Both)

You'll see a blank canvas with an iPhone frame.

Step 2: Add Your First Screen

Every Story starts with one screen. Add content to it:

  • From the element toolbar at the bottom, click Text
  • The element is automatically added to the canvas
  • Type a welcome message: "Welcome to [Your App]!"
  • Drag to position it near the top of the screen

Step 3: Add More Elements

Add images, buttons, and other elements to complete your screen. See Story Editor Basics for detailed guidance on working with elements.

For a typical welcome screen, you'll want:

  • An image to showcase your app
  • A "Get Started" button with action set to Next Screen

Step 4: Add More Screens

  • Click the + icon in the screen list (left sidebar)
  • A new blank screen appears
  • Add text, images, and buttons to complete the flow
  • Add a Dismiss Story button on the last screen

Step 5: Publish

  • Click Publish in the top bar
  • Confirm you want to go live
  • Your Story is now live and will appear to users!

For Developers: See the Developer Documentation for SDK integration.