Media
Add images, videos, Lottie animations, and carousels to your flows.
Media
Media components bring visual richness to your in-app experiences. Display images, play videos, render Lottie animations, or build swipeable carousels — all rendered natively on each platform.
Image
The Image component displays static images on a screen. You can upload images directly to Setgreet or reference them by URL.
Properties
| Property | Type | Description |
|---|---|---|
| Source | image | Upload an image or provide a URL. |
| Content Mode | select | How the image fills its frame: Fit (preserves aspect ratio, may letterbox), Fill (stretches to fill), Cover (crops to fill while preserving aspect ratio). |
| Width | size | Component width. Pixel value, percentage, or "auto". |
| Height | size | Component height. Pixel value, percentage, or "auto". |
| Aspect Ratio | number | Fixed width-to-height ratio (e.g., 16/9). When set, the image scales proportionally. |
| Border Radius | number | Corner rounding in pixels. |
| Padding | spacing | Internal spacing around the image. |
| Margin | spacing | External spacing around the component. |
| Opacity | number | Transparency level (0 to 1). |
Variable bindings
The image source URL supports variable bindings. This lets you display user-specific images — for example, a profile photo loaded from a user attribute.
Uploaded images are stored on Setgreet's CDN and served with optimized caching. For dynamic images, use a URL source with variable bindings.
Video
The Video component embeds a native video player within your flow screens. Use it for product walkthroughs, onboarding tutorials, or promotional content.
Properties
| Property | Type | Description |
|---|---|---|
| Source URL | url | URL to the video file (MP4 recommended). |
| Autoplay | boolean | Start playing automatically when the screen appears. Default: true. |
| Loop | boolean | Restart the video when it reaches the end. Default: false. |
| Mute | boolean | Play without audio. Default: false. |
| Show Controls | boolean | Display native playback controls (play/pause, seek). Default: true. |
| Width | size | Component width. |
| Height | size | Component height. |
| Aspect Ratio | number | Fixed width-to-height ratio. |
| Border Radius | number | Corner rounding. |
| Poster Image | image | Thumbnail displayed before the video plays. |
Analytics
Video interactions are automatically tracked: play, pause, completion, and watch duration. These events appear in your flow analytics and can be forwarded to external analytics tools.
Lottie
The Lottie component renders JSON-based animations created with After Effects and exported via Bodymovin. Lottie animations are lightweight, resolution-independent, and render smoothly on both iOS and Android.
Properties
| Property | Type | Description |
|---|---|---|
| Source | url | URL to the Lottie JSON file. |
| Autoplay | boolean | Start the animation immediately. Default: true. |
| Loop | boolean | Repeat the animation continuously. Default: true. |
| Speed | number | Playback speed multiplier. Default: 1. Values above 1 speed up, below 1 slow down. |
| Start Frame | number | Frame number to begin playback from. |
| End Frame | number | Frame number to stop playback at. |
| Width | size | Component width. |
| Height | size | Component height. |
When to use Lottie
Lottie is ideal for:
- Animated illustrations during onboarding
- Success/celebration animations after completing a task
- Loading or progress indicators with custom branding
- Attention-grabbing decorative elements
Lottie JSON files should be hosted on a CDN or uploaded to Setgreet. Keep file sizes reasonable (under 500KB) for optimal performance on mobile devices.
Carousel
The Carousel component creates a horizontally swipeable set of cards. Each card can contain its own content — images, text, buttons — making carousels effective for feature tours, product showcases, or multi-step introductions within a single screen.
Properties
| Property | Type | Description |
|---|---|---|
| Items | array | The list of carousel cards. Each card has its own content configuration. |
| Autoplay | boolean | Automatically advance through cards. Default: false. |
| Autoplay Interval | number | Seconds between auto-advances. Default: 3. |
| Show Indicators | boolean | Display dot indicators below the carousel. Default: true. |
| Indicator Color | color | Active indicator dot color. |
| Indicator Inactive Color | color | Inactive indicator dot color. |
| Loop | boolean | Return to the first card after the last. Default: true. |
| Width | size | Carousel width. |
| Height | size | Carousel height. |
| Gap | number | Spacing between cards in pixels. |
Analytics
Carousel swipe interactions are tracked automatically. You can see which cards users viewed, how far they swiped, and which card they stopped on in your flow analytics.