Native Experience editor
Use the Native Experience editor to add content to your Scene and determine appearance and behaviors.
The Native Experience editor is the built-in editor when creating a Scene. It supports configuring appearance, behavior, and BranchingA way to create a custom user path through a Scene’s screens. A user’s interactions and responses on the current screen determine which screen appears next..
Configuration sections
The following describes each configuration section in the Native Experience editor. After completing configuration, select Done. You will then see a collapsed view of your screens. Select the arrows to page through each screen. Select Expand to see the screens side by side. The preview tools there are the same as when configuring content.
Behavioral settings
Select the settings icon () in the left sidebar to configure behavioral settings that apply to the entire Scene. Follow the steps in Scene behaviors.
Screens
Select the screens icon () in the left sidebar to configure the appearance of your screens. For settings that apply to all screens, follow the steps in Root appearance.
Configure your screen content based on the content type you selected:
- Start with AI — See Create Scene content using AI.
- Start from Scratch — See Configuring screens.
- Custom HTML — See Provide custom HTML in Create a Scene.
- Default or custom content layouts — Toggle Default and Custom to see available content layouts. For custom content layouts, you can search by layout name or description. After selecting a layout, it appears in the device preview. Select the arrows to page through each screen.
After selecting a layout, see Configuring screens to refine your content.
Branching
Select the branching icon () to create a custom user path through multiple screens. See Scene branching.
Accessibility audit
Agentic & Generative AI
The accessibility agent automatically audits your content and identifies potential accessibility issues, such as insufficient color contrast, missing alternative text, and text size that falls below recommend minimums. Addressing these issues helps ensure your content is usable by the greatest number of audience members, including those with disabilities.
While editing screens, when an accessibility issue is found, a red dot appears on the accessibility audit icon () in the left sidebar. Select the icon to view the list of flagged issues. Each issue includes:
- A description of the problem
- The screen and element where it occurs
- Guidance on how to address it
- A button labeled with the recommended correction — AI-powered corrections are labeled “Fix with AI”
Select the button to apply the correction, and then verify each automatically applied fix to ensure it meets your needs and maintains your intended messaging.
You are responsible for reviewing all automatically applied fixes before launching your Scene. Automated fixes may not always align with your specific content requirements or brand guidelines. For comprehensive accessibility guidance and best practices, see Accessibility in messaging.
The following issues can be automatically fixed:
| Issue type | Description |
|---|---|
| Insufficient color contrast | These are color contrast ratio issues between content elements, such as indicator colors versus background colors. The agent presents issues for both light and dark modes. The fix adjusts colors to meet WCAG contrast ratio requirements. |
| Text not marked as heading | These are text items that visually appear to be headings, such as bold or larger font, but are not marked with a semantic H1-H6 tag. The fix applies an appropriate heading level based on the text’s position and styling. |
| No headings in screen | This flags content if no Text elements are designated as headings (H1-H6). The fix suggests appropriate heading levels for Text elements that appear to be headings. |
| Heading order | This identifies and recommends fixes for out-of-order heading structure. The fix adjusts heading levels to create a logical hierarchy. |
| Text size below minimum | This is text that does not meet minimum readability recommendations. The fix adjusts the font size to meet accessibility standards. |
| Images containing text | This is any image that contains text, which screen readers cannot interpret. The fix adds or updates the alternative text field to describe the text within the image. |
| Missing alternative text | This is any image that lacks descriptive alternative text. The fix uses AI to generate descriptive alternative text for the image. |
| Missing content descriptions or accessibility label associations on inputs | These are input fields that lack content descriptions or accessibility label associations. The fix uses AI to generate content descriptions. For accessibility labels, the fix always generates a content description but does not suggest label relationships with text inputs. |
| Missing content descriptions on buttons | These are buttons that lack content descriptions. The fix uses AI to generate descriptive content descriptions for buttons. |
Opting In to AI Functions
If you opted out of AI usage, you must sign an updated contract to enable this feature. Contact your account manager for assistance.
Compliance Considerations in Using AI Functions
The Service incorporates AI functions, including Generative AI and Agentic AI.
Generative AI generates content such as Notification copy, images, and Journeys based on your prompts.
Agentic AI autonomously optimizes, personalizes, or executes cross-channel customer engagement actions, or analyzes audience and performance data, subject to the parameters and controls you set in the Service. These systems operate under human-defined parameters and do not initiate customer-facing actions without human interaction or pre-configured parameters. You are responsible for reviewing Generated Outputs for accuracy, appropriateness, and to ensure they do not violate third-party intellectual property or other rights. Airship does not publish Generated Outputs to end users without approval from the Customer.
In addition to the applicable terms of your agreement with Airship (e.g., Use of Service, Customer Responsibilities sections), you must comply with the Airship Acceptable Use Policy, which provides additional details about appropriate conduct when using the Service.
The Service includes safety features to block harmful content, such as content that violates our Acceptable Use Policy. You may not attempt to bypass these protective measures or use content that violates your agreement with Airship.
About the AI models:
Airship utilizes Google Gemini and Imagen to generate copy and images for AI Scene screens. The content is created solely with Google’s out-of-the-box models, and no customization or fine-tuning with Customer Data is applied. See Responsible AI in Google’s Google Cloud documentation.
Preview tools
The device preview updates as you type and make selections. Use the tools in the header to adjust the preview.
Available tools:
| Tool | Description | Steps |
|---|---|---|
| App/Web format | This tool displays the Scene as it will appear in an app or website. The buttons only appear when both App and Web are enabled. See Audience in Create a Scene. | Select the grid icon () for App or the globe icon () for Web. |
| Orientation | This tool shows how the Scene will appear when the device or monitor is rotated. | Toggle the device orientation icon (). |
| Light/Dark mode | This tool shows the appearance of elements with an assigned Color SetA 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.. Light Mode values appear in Dark Mode preview if no Dark Mode value was entered for a color set. | Toggle the sun icon () and moon icon (). |
| Text scaling | This tool shows how the content will appear on devices using text size accessibility features. Scale between 70% and 200% of the current text size. | Select the text scale tool and set a scale. |
| Device/Screen size | This tool provides a more accurate representation of how your content will appear on a specific screen size. | Select a device or screen size. |
| Interactive mode | This tool enables testing the interactive elements of your Scene with all configuration panels hidden. You can swipe between screens or select buttons or other elements configured with Next or Previous actions. When StoryA Scene set to automatically transition to the next screen without swiping or clicking. mode is enabled, select the play icon () or pause icon () to test automatic screen transitions and background video playback. | Select the preview icon () to enter Interactive mode, then test your Scene. Select the reload icon to reset and return to the first screen. |
| Preview Data | For personalized content, this tool displays the values for a selected user or your own JSON sample data. Otherwise, the preview displays the default values. See Previewing personalized content. | Follow the steps in Previewing personalized content. |
For best results, always test your content on actual devices.
Markdown styling
Markdown is a markup language for formatting text. Scenes support basic Markdown. Use Markdown in text fields in any content element.
These styles require minimum SDK versions:
| Style | Syntax | Output |
|---|---|---|
| Bold | **Hello** or __Hello__ | Hello |
| Italic | *Hello* or _Hello_ | Hello |
| Strikethrough | ~Hello~ | |
| Link¹ | [Hello](https://www.example.com/hello) | Hello |
| Highlight | ==Hello== | Hello |
| Subscript | H,{2},O | H2O |
| Superscript | x^^2^^ | x2 |
1 Links are not underlined and use the default link color for the platform: blue on web, unless overridden by CSS; the app’s accent color on iOS; and the theme’s linkTextColor on Android.
Personalization
You can personalize Scene content using HandlebarsHandlebars is Airship’s templating language for personalization. Handlebars expressions use double curly braces wrapped around a content template, ranging from a simple variable, e.g., {{first_name}}, to complex evaluations of personalization data. to display different text or media for each user. For example, you can display a question in different languages based on the user’s locale Attribute. Common places to personalize include:
- Screen titles and descriptions
- Button labels
- Questions and NPS content
- Input field placeholders
- Media URLs
See Personalization for more information about using Handlebars in your content.