Design in-app messages with drag and drop
Learn how to use OneSignal’s drag-and-drop composer to create in-app messages with customizable blocks, layouts, and personalization options.
In-app message design
OneSignal’s drag-and-drop editor allows you to build in-app messages using modular block elements — no coding required. If you prefer writing code, see Design In-App Messages with HTML.
Available block types:
- Text: Add custom text with font, size, and alignment options.
- Image: Embed images with optional click actions.
- Button: Add interactive buttons with CTAs and deep links.
- Close Button: Add or customize a dismiss icon.
- Background: Customize with color, images, and transparency.
IAM drag and drop editor
Navigate to Messages > In-App to manage your in-app messages.
Message type
This setting defines how the in-app message appears on the screen:
Message Type | Description |
---|---|
Top | Drops down from the top of the screen. |
Center | Expands from the center and partially fills the screen. |
Bottom | Pops up from the bottom of the screen. |
Full | Expands from the center to fill the screen. Use with or without margins. No-margin mode requires SDK versions: iOS 3.9.0+, Android 4.6.3+. Older SDKs will show with margins. |
Carousel | Multi-screen messages with up to 10 cards. Requires a Paid Plan and the Full message type. |

Image showing types of In-Apps you can create.
Orientation support
In-app messages support both portrait and landscape modes.

Image showing portrait and landscape orientations.
Block types and settings
Click Add Block to insert a new element. Blocks can be dragged, renamed (name appears in analytics), cloned, or deleted.

Adding and removing a block
Text
Use the Text block to add descriptions, features, or personalized content.
- Responsive sizing: Width and height set in percentages.
- Font: Choose from Google Fonts.
- Formatting: Bold, italic, underline.
- Color: Use RGBA for transparency.
- Alignment: Left, center, or right.
- Size: Set font size.
Advanced
- Margins: Add spacing around the container.
- Tips:
- Use language-based audiences to localize.
- Use data tags for personalization.

Text block
Image
Visually enhance messages with image blocks. Supported formats: .jpg
, .png
, .gif
(max 5MB). Use hosted image URLs for performance.
Recommended aspect ratios: 16:9
, 4:3
, 3:2
.
- Click action: Optional.
- Advanced:
- Dismiss on click
- Margins
- Tips:
- Use tag substitution for personalized images and links.
- For transparency, use
.png
. - Segment by language for localization.

Image block
Button
Add buttons for CTAs such as navigation, feedback, or permissions.
- Text & font: Customize CTA copy and style.
- Color & size: Customize button visuals.
- Image: Embed optional images.
- Corner radius: Adjust rounding.
- Click action: Supports tagging, outcomes, prompts, and deep links.
Advanced
- Margins
- Borders & shadows: Fully customizable.
- Dismiss on click
Tips
- Use data tags to personalize button copy or link.
- To make a button fully image-based, set background opacity to 0.
- Use low-opacity shadows with high blur for subtle effects.

Button block
Close button
Control the visibility and design of the close (X) icon.
- Toggle: Enable/disable.
- Custom icon: Supported formats:
.jpg
,.png
,.svg
,.gif
. Recommended size: 10x10px. - Click action: Optional.
Advanced
- Margins
Tips
- If you disable the close button, provide a dismiss action on a final card or CTA to allow users to exit.
- Useful in carousels to require full interaction.

Close button
Background
Set background color or images for message context and branding.
- Image support:
.jpg
,.png
,.gif
- Click action: Optional
- Color: Supports RGBA
Advanced
- Margins
- Padding: Space between content and message edges (default 24px)
- Dismiss on click

Background editor
FAQ
How can I make a full-screen in-app? What SDK version do I need?
To create an in-app message without margins:
- iOS SDK 3.9.0+
- Android SDK 4.6.3+
Users on older SDKs will still see the message, but with default margins.
How can I personalize the in-app message per user?
Use tag substitution in:
- Text block content
- Image/background image URLs and click actions
- Button content and click actions
Supported on iOS 3.3.0+ and Android 4.3.0+
How can I remove the gray background or drop shadow from banner-style in-apps?
To remove overlays for top/bottom banners, update your SDKs and configure the following:
iOS 5.1.5+
Android 5.1.9+