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 | Default | Description |
|---|---|---|---|
| Source | image | -- | Upload an image or provide a URL. |
| Alt Text | text | -- | Description used by screen readers. |
| Object Fit | select | cover | cover crops to fill, contain fits inside, fill stretches, none uses the intrinsic size. |
| Position | select | center | Which part of the image to keep when cropping: center, top, bottom, left, or right. |
| Width | size | 100% | Pixel value, percentage, or Auto. |
| Height | size | 200 | Pixel value, percentage, or Auto. |
| Border Radius | number | 0 | Corner rounding in pixels. |
| Border | border | -- | Width, style, and color. |
| Shadow | shadow | -- | Offset, blur, spread, and color. |
| Opacity | number | 100 | Transparency from 0 to 100. |
| Margin | spacing | 0 | External spacing around the component. |
| On Click | action | -- | Action to run when the image is tapped. |
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 | Default | Description |
|---|---|---|---|
| Video URL | text | -- | URL to the video file (MP4 recommended). |
| Poster Image | image | -- | Thumbnail displayed before the video plays. |
| Title | text | -- | Optional title for the player. |
| Aspect Ratio | select | 9:16 | 9:16 (vertical, the default), 16:9, 4:3, 1:1, 21:9, or custom. |
| Width | size | 100% | Component width. |
| Height | size | 200 | Component height. |
| Object Fit | select | cover | cover, contain, or fill. |
| Autoplay | boolean | false | Start playing automatically when the screen appears. |
| Loop | boolean | false | Restart the video when it reaches the end. |
| Muted | boolean | false | Play without audio. |
| Show Controls | boolean | true | Display native playback controls. |
| Track Playback | boolean | true | Send play, pause, and completion events to analytics. |
| Border Radius | number | 8 | Corner rounding. |
| Margin | spacing | bottom 16 | External spacing. |
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 and resolution-independent.
On Android, Lottie is included in the core SDK. On iOS it lives in an optional SetgreetSDKLottie module: add it and
call SetgreetLottie.register(), or Lottie components render as an empty placeholder. For motion that does not need a
designed animation file, the built-in animation presets render natively everywhere with
no extra dependency.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Animation URL | text | -- | URL to the Lottie JSON file. |
| Autoplay | boolean | true | Start the animation immediately. |
| Loop | boolean | true | Repeat the animation continuously. |
| Speed | number | 1 | Playback speed multiplier. Above 1 speeds up, below 1 slows down. |
| Play on Hover | boolean | false | Play only while hovered. Applies to the web preview; there is no hover state on a device. |
| Width | size | 100% | Pixel value, percentage, or Auto. |
| Height | size | Auto | Pixel value, percentage, or Auto to derive the height from the animation's aspect ratio. |
| Margin | spacing | 0 | External spacing. |
By default a Lottie fills the available width and sizes its height automatically from the animation's intrinsic aspect ratio, so it stays proportional on every screen size. Set a fixed pixel width or height to override this.
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 | Default | Description |
|---|---|---|---|
| Items (JSON) | textarea | -- | The carousel cards, authored as a JSON array. |
| Height | size | 300 | Carousel height. |
| Autoplay | boolean | false | Automatically advance through cards. |
| Autoplay Interval | number | 5000 | Milliseconds between auto-advances. |
| Loop | boolean | true | Return to the first card after the last. |
| Show Dots | boolean | true | Display dot indicators below the carousel. |
| Show Arrows | boolean | true | Display previous and next arrows. |
| Dots Color | color | #3B82F6 | Color of the indicator dots. |
| Pause on Hover | boolean | true | Pause autoplay while hovered. Applies to the web preview. |
| Border Radius | number | 8 | Corner rounding. |
| Margin | spacing | bottom 16 | External spacing. |
Autoplay Interval is in milliseconds, not seconds. The default of 5000 is five seconds; entering 3 gives a 3ms
interval, not three seconds.
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.