Scenes

Why use Scenes?

Use Scenes to build and update rich user interfaces remotely across mobile apps and the web without waiting for engineering release cycles. By utilizing a Server-Driven UI (SDUI) approach, Scenes ensure optimal performance on every device by rendering as native components on mobile and optimized HTML on the web. You can deploy interface updates in real-time using declarative data, ensuring your experiences remain agile while strictly adhering to app store policies regarding remote code execution.

Native rendering and performance

Scenes utilize the native components for each platform to ensure maximum performance. On mobile apps, Scenes render as fully native UI components that leverage SwiftUI on iOS and provide seamless Jetpack Compose support on Android. On the web, they render as optimized HTML elements. This architecture ensures:

• High performance — Mobile Scenes allow for smooth, native gestures and animations. Web Scenes use modern, lightweight web technology to ensure fast load times and responsive interactions across devices.
• Design consistency — Scenes use your centralized brand guidelines to maintain visual unity across channels. Typography, colors, and themes are applied consistently across iOS, Android, and Web, eliminating common platform discrepancies. Scenes also respect user device settings, seamlessly adapting to Light and Dark mode preferences.
• Deep platform integration — Scenes respect the “rules” of the device. This means handling Safe Areas and notches on mobile, while managing window resizing and responsive behavior on the web.
• Accessibility — Leveraging native components ensures support for core accessibility features like screen readers (VoiceOver/TalkBack), dynamic text sizing, and high contrast modes. Scenes are engineered to align with Web Content Accessibility Guidelines (WCAG) and map to correct platform standards, minimizing the configuration required to support users relying on assistive technologies.

Full visual editor

Create and update screens via the Scene composer in the Airship dashboard. No engineering resources required.

• No-code design — Build custom, reusable layouts from scratch or generate them via AI. You control the layout, styling, and interactions without rigid restrictions.
• AI assisted creation — Generate layouts and copy instantly using AI to speed up your workflow.
• Reusable layouts — Save Scene designs to quickly replicate layouts and maintain brand consistency across different campaigns.
• Reduced overhead — Eliminate the need to build and maintain custom UI components for every new message type.

Extensibility with Custom Views

Bridge the gap between no-code flexibility and advanced custom capabilities. You can embed native mobile app views or custom web components registered via the Airship SDK directly into a Scene. This allows you to include:

• Authentication — Embed login, sign-up, or biometric prompts directly within an onboarding flow.
• Commerce — Embed shopping carts or checkout flows directly within the message.
• Existing UI components — Reuse complex interfaces you’ve already built, such as video players, product cards, or AR experiences.
• Interactive maps — Embed store locators or delivery tracking.
• Live data — Display real-time stock quotes, flight status, or sports scores.

See Custom Views for more details.

Hybrid real-time and offline capability

Scenes use an intelligent caching strategy to balance performance with personalization.

• Fast performance — Scenes are cached on the device for instant display, with automatic updates when triggered to ensure users see the latest content.
• Offline support — Simple text-only Scenes can display even when the device is offline, ensuring your messages reach users regardless of connectivity.
• Real-time personalization — Scenes with personalization and advanced audience targeting are processed right before display, so users always see content tailored to their current context and behavior.
• Smooth experience — Images load before the Scene appears, ensuring a polished, complete experience without loading delays.

Real-time triggering

Scenes respond instantly to user actions and behaviors, enabling you to deliver contextual experiences at the perfect moment.

• Custom Events — Trigger Scenes based on any user action you track—purchases, cart additions, video views, button clicks, or any custom interaction. Create connected, multi-step experiences that respond to user behavior in real time.
• Screen views — Display Scenes when users navigate to specific screens in your app or website. Guide users through onboarding flows, highlight features on relevant pages, or provide contextual help exactly where they need it.
• App opens and sessions — Welcome users on their first visit, celebrate milestones after multiple sessions, or re-engage users who haven’t opened your app recently.
• App updates — Introduce new features or highlight changes when users update to a new version of your app.
• Web URL targeting — For web experiences, trigger Scenes based on specific URLs, query parameters, or navigation patterns. Perfect for campaign landing pages, checkout flows, or personalized content based on referral sources.
• Feature FlagAn experimentation tool for controlling the availability of content or functionality in your app or website. A flag’s Configurations determine the audience, schedule, and property values to apply when the flag is enabled. Flag properties enable making immediate code updates, bypassing the need for traditional code changes and release processes. interactions — Trigger Scenes based on feature flag interactions, enabling you to create experiences tied to feature rollouts or A/B tests.

You can combine multiple triggers and set display conditions to create sophisticated, context-aware experiences that adapt to each user’s behavior and context. See In-App Experience Triggers for complete configuration details.

Interactive capabilities

Scenes support rich interactive features that enable two-way communication and dynamic user experiences:

• Surveys and feedback collection — Create surveys with various question types (open, single/multiple choice) and NPS elements. Present them at the optimal moment based on user behavior to collect responses in real time.
• Channel registration — Collect contact info directly within Scenes. Users can register for email or SMS channels without leaving your app, enabling seamless channel growth and re-engagement opportunities.
• Branching logic — Create dynamic, personalized experiences that adapt based on user responses or conditions. Branching allows you to show different screens or paths based on user selections, enabling sophisticated, context-aware messaging flows.
• Story mode — Create engaging, auto-advancing experiences similar to social media stories. Perfect for visual narratives or product showcases, users can tap to navigate or let the story play automatically with customizable timing.

Flexible display formats

Scenes adapt to your content and use case with multiple display formats and presentation styles, each optimized for different scenarios:

• Embedded Content — Inject dynamic Scene content directly into your app or website’s existing screens (e.g., a banner within a feed) rather than overlaying them. This allows you to add dynamic, remotely configurable content to specific locations—perfect for promotional banners, featured content sections, or contextual help that appears exactly where users need it.
• Fullscreen — Immersive experiences perfect for onboarding flows, multi-step tutorials, or important announcements.
• Modal — Standard overlays for quick announcements, surveys, or calls-to-action.

You can create custom view styles beyond the default modal and fullscreen options, giving you complete control over size, position, and appearance. This flexibility ensures your Scenes match your brand and user experience goals, whether you need a subtle nudge or a bold statement.

Responsive design across devices

Optimize your Scenes for different screen sizes and orientations using conditional design overrides that automatically adjust your content based on device characteristics:

• Device-specific optimization — Ensure Scenes display appropriately across smartphones, tablets, and different screen sizes. A fullscreen Scene on a phone can automatically display as a smaller modal on a large tablet for a better viewing experience.
• Orientation adaptation — Configure different display settings for portrait and landscape orientations, ensuring your content looks great regardless of how users hold their device.
• Automatic adjustments — Set conditional overrides that apply based on device size and orientation, so you don’t need to create separate Scenes for different devices.
• Preview tools — Use orientation and device size preview tools while creating Scenes to see how your content will appear across different scenarios before deployment.

See Conditional design overrides for more details.

Use cases

Scenes can be used for a variety of custom experiences that you define. The following examples demonstrate how Scenes can support different stages of the user experience.

Onboarding and engagement

Use Scenes to guide new users and encourage key actions:

• Welcome messages — Communicate the value of your app and highlight key features.
• Push opt-in prompts — Explain the value of your notifications to drive opt-in rates.
• Registration/login — Drive registrations and logins to your loyalty program or account.

Promotional messaging

Use Scenes to deliver targeted promotional content and drive conversions:

• Sales and discounts — Highlight special offers, flash sales, or limited-time discounts with rich visuals and clear calls-to-action.
• Product launches — Announce new products or features with engaging multi-screen experiences that showcase key benefits and drive early adoption.
• Loyalty program benefits — Promote exclusive rewards, points multipliers, or member-only offers to encourage engagement and retention.
• Seasonal campaigns — Create timely promotional experiences for holidays, events, or seasonal shopping periods with contextually relevant content.
• Cross-sell and upsell — Display complementary products or premium features based on user behavior or purchase history.
• Event promotions — Drive attendance or participation for webinars, in-store events, or special occasions with interactive promotional content.

Feedback and surveys

Collect user feedback at strategic moments:

• App reviews — Prompt users to rate your app after positive experiences.
• NPS (Net Promoter Score) — Display an NPS survey to gauge how likely your users are to recommend your app.
• Customer service rating — Display a customer service satisfaction survey after they end a support chat.
• Purchase confirmation — Display a survey after they complete a purchase to get feedback on your checkout process.
• General feedback — Display a survey in response to a button click.
• Account closure — Display a survey at the end of an account closing asking why they closed their account.

Web URL targeting

Web Scenes support URL-based targeting that enables precise control over when and where your content appears on your website. You can create contextually relevant experiences without requiring web development resources.

Common use cases:

• Page-specific messaging — Show different content on product pages, checkout flows, or landing pages.
• Campaign targeting — Display content based on UTM parameters or referrer sources.
• Workflow guidance — Guide users through complex workflows with contextual messaging.

Example scenarios:

• Welcome new visitors arriving at your homepage.
• Show product promotions on specific category pages.
• Display checkout assistance when users reach cart pages.
• Target users from email campaigns with personalized follow-up content.

See Web URL in In-App Experience Triggers for configuration details.

Appearance and behavior

Scenes appear regardless of a user’s opt-in/out status for notifications and remain on screen until the user interacts with them, either by swiping or tapping through all screens or dismissing the Scene. They persist across app and web sessions until dismissed.

For Scenes with multiple screens, dots appear at the bottom, indicating the number of screens. You can set colors for their active and inactive states, hide them, and disable the swipe requirement to require interacting with buttons and prevent swiping between screens.

Scenes can be customized for device Light and Dark modes by creating Color SetsA named pair of hexadecimal color values supporting device Light and Dark modes. Color sets can be selected for any color field in a scene and when configuring the default appearance of Scenes and In-App Automations. Dark mode is supported for Scenes only. and assigning them when configuring color fields for various design settings, like background, text, or the dismiss button.

View styles

All projects contain two preset view styles, Modal and Fullscreen, and you can create custom versions for each.

• A modal view is smaller than the full width of the screen, superimposed on the app with the background color of your choosing, indicating that the interruption is temporary. It takes over the user’s screen, compelling the user to interact with it.

• Fullscreen Scenes have the same design as modal but use the entire screen. You can set fullscreen Scenes to extend to the full height and width of a device or display only within the area of your app’s interface that is not covered by physical or UI elements, such as a status bar or notch.

You can also present the content of a Scene on any app screen as defined by an app developer. This format is called Embedded Content.

Screens and design

Scenes can have up to 20 screens. You can design screens manually or use AI generation.

Each screen can contain these elements:

• Text
• Text Input — A field for entering user input for collection
• List — A bulleted list where the bullet is an image you provide
• Media — An image or video
• Button — A single button
• Button group — One to five buttons
• NPS — A survey based on the net promoter score  metric, which measures how likely it is that your users would recommend your brand or product to a friend or colleague
• Question — Open, single choice, or multiple choice
• Email — A field for entering an email address for collection or registration as a channel
• SMS — A field for entering a phone number for collection or registration as a channel
• Custom View — A native app view embedded within a screen
• Container

For all configuration details and options, see Configuring Scene content.

Getting started with Scenes

Follow these steps to start using mobile app Scenes with Airship:

• Configure mobile channels in your project settings See Configuring Mobile Channels in the Getting Started guide.
• Integrate the Mobile SDK with your app See SDK setup for mobile apps in our developer documentation.

Follow these steps to start using web Scenes with Airship:

• Configure the Web channel in your project settings.
• Integrate the Web SDK with your website.

  See Getting Started for the Web SDK in our developer documentation.

Once your project is set up, you can start creating Scenes. To set default values for all new Scenes, see In-App Experience Defaults.