Adding Elements

Elements are the building blocks of your Story screens - text, images, buttons, forms, and more.

Overview

Every screen in your Story is composed of elements. Snoopr provides 25+ element types to build rich, interactive experiences. This guide gives an overview of element categories and links to detailed guides.

Display Elements

Static content that users view but don't interact with:

  • Text: Headings, paragraphs, and styled text
  • Image: Photos, illustrations, icons from your asset library
  • Shape: Rectangles and circles for backgrounds or decoration
  • Badge: Small pill-shaped labels
  • Star Rating: Display ratings (read-only)

Interactive Elements

Elements users tap or engage with:

  • Button: Tappable button with an Action property:
    • Next - Advances to the next screen
    • Close - Dismisses the Story and delivers collected responses
  • Select List: Radio or checkbox list for single/multi selection
  • Card Select: Grid of tappable cards with icons
  • Bubble Picker: Organic bubble layout for selections
  • Image Select: Grid of images to choose from
  • Toggle: On/off switch
  • Toggle List: Multiple toggles in a list

Progress Elements

Show journey progress or status:

  • Progress Indicator: Dots, bar, or numbers showing story progress
  • Task Progress: Percentage bar with label
  • Timeline: Vertical steps with status
  • Checklist: List with checkmarks/status

Layout Elements

Organize and structure content:

  • Group: Container to move elements together
  • Carousel: Horizontal scrollable content

Common Element Properties

Most elements share these properties:

  • Position: X, Y coordinates on canvas
  • Size: Width and height
  • Opacity: Transparency (0-100%)
  • Corner Radius: Rounded corners
  • Light/Dark Colors: Separate colors for each theme mode

Data Capture

Interactive elements can capture user responses:

  • Give the element a Name in the properties panel
  • User responses are stored with that name
  • Data is passed to your app via the SDK as JSON - process it however you like

Your data stays yours. Captured responses never leave the device for Snoopr's servers - the SDK passes them directly to your app.

Example: A "Interests" select list named user_interests captures which options users select.

Tips & Best Practices

  • Less is more - Don't overcrowd screens; 3-5 elements per screen is usually ideal
  • Hierarchy matters - Make primary actions (buttons) prominent
  • Consistent styling - Use your brand themes throughout

For Developers: Learn how to handle captured data in the Handling User Data guide.