# Scenes editor

Use the Scenes editor to add content to your Scenes and determine appearance and behaviors.

The Scenes editor is the built-in editor when [creating a Scene](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/). It supports configuring appearance, behavior, and branching.

## Configuration sections

The following describes each configuration section in the Scenes editor. After completing configuration, select **Done**.

### 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](https://www.airship.com/docs/guides/messaging/editors/scenes/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](https://www.airship.com/docs/guides/messaging/editors/scenes/root/).

Configure your screen content based on the [content type you selected](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/#content):
   * ** Start with AI** — See [Create Scene content using AI](https://www.airship.com/docs/guides/messaging/editors/scenes/ai-content/).
   * **Start from Scratch** — See [Configuring screens](https://www.airship.com/docs/guides/messaging/editors/scenes/screens/).
   * **Custom HTML** — See [Provide custom HTML](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/#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](https://www.airship.com/docs/guides/messaging/editors/scenes/custom-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](https://www.airship.com/docs/guides/messaging/editors/scenes/screens/) to refine your content.

![Configuring screens in a Scene](https://www.airship.com/docs/images/scene-layout-grid_hu_f0b13f27fb574377.webp)

*Configuring screens in a Scene*

### Branching

Select the branching icon () to create a custom user path through multiple screens. See [Scene branching](https://www.airship.com/docs/guides/messaging/editors/scenes/branching/).

### Accessibility audit

[Agentic & Generative AI](https://www.airship.com/docs/guides/features/intelligence-ai/ai/)

![The accessibility agent showing an issue](https://www.airship.com/docs/images/accessibility-audit_hu_971902f2dae02559.webp)

*The accessibility agent showing an issue*

The accessibility agent automatically audits your content and identifies potential accessibility issues. Addressing them 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

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. AI-powered corrections are labeled "Fix with AI".

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](https://www.airship.com/docs/guides/messaging/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. |

> **Note:** **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](https://www.airship.com/legal/acceptable-use/), 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](https://cloud.google.com/responsible-ai?hl=en) 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.

![Preview tools in the Scene composer](https://www.airship.com/docs/images/scene-preview-tools_hu_c44da9246b5abdd2.webp)

*Preview tools in the Scene composer*

Available tools:

| Tool | Description |
| --- | --- |
| **App/Web format** | Select the grid icon () for App or the globe icon () for Web to display the Scene as it will appear in an app or website. The buttons only appear when both App and Web are enabled. See [Audience](https://www.airship.com/docs/guides/messaging/in-app-experiences/scenes/create/#audience) in _Create a Scene_. |
| **Orientation** | Toggle the device orientation icon () to see how the Scene appears when the device or monitor is rotated. |
| **Light/Dark mode** | Toggle the sun icon () and moon icon () to see how elements with an assigned [color set](https://www.airship.com/docs/reference/glossary/#color_set) appear in each mode. Light Mode values appear in Dark Mode preview if no Dark Mode value was entered for a color set. |
| **Text scaling** | Use the text scale tool to see how the content will appear on devices using text size accessibility features. You can scale between 70% and 200% of the current text size. |
| **Device/Screen size** | Select a device or screen size to see a more accurate representation of how your content will appear on a specific screen size. |
| **Interactive mode** | Select the preview icon () to enter Interactive mode and test the interactive elements of your Scene. You can swipe between screens or select buttons or other elements configured with Next or Previous actions. When [Story](https://www.airship.com/docs/reference/glossary/#story) mode is enabled, select the play icon () or pause icon () to test automatic screen transitions and background video playback. Select the reload icon to reset and return to the first screen. |
| **Preview Data** | See how the personalized content appears using values for a selected user or your own JSON sample data. Follow the steps in [Previewing personalized content](https://www.airship.com/docs/guides/personalization/previewing/). |

> **Tip:** For best results, always test your content on actual devices.


## Markdown styling

[Markdown](https://en.wikipedia.org/wiki/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](https://www.airship.com/docs/reference/messages/scene-sdk-minimums/#markdown-styling):

| Style | Syntax | Output |
|-------|--------|--------|
| **Bold** | `**Hello**` or `__Hello__` | **Hello** |
| **Italic** | `*Hello*` or `_Hello_` | *Hello* |
| **Strikethrough** | `~Hello~` | ~~Hello~~ |
| **Link**¹ | `[Hello](https://www.example.com/hello)` | [Hello](https://www.example.com/hello) |
| **Highlight** | `==Hello==` | <mark>Hello</mark> |
| **Subscript** | `H,{2},O` | H<sub>2</sub>O |
| **Superscript** | `x^^2^^` | x<sup>2</sup> |

<sup>1</sup> Links are not underlined and use the default link color for the platform. On web, the color is blue unless overridden by CSS. On iOS, it is the app's accent color. On Android, it is the theme's `linkTextColor`.

## Personalization

You can personalize Scene content using [Handlebars](https://www.airship.com/docs/reference/glossary/#handlebars) 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](https://www.airship.com/docs/guides/personalization/about/) for more information about using Handlebars in your content.