​
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 TypeDescription
TopDrops down from the top of the screen.
CenterExpands from the center and partially fills the screen.
BottomPops up from the bottom of the screen.
FullExpands from the center to fill the screen. Use with or without margins.
Add a Carousel to create a multi-screen message.

Image showing types of In-Apps you can create.

​
Carousels

Carousels can be extremely useful for providing additional information to users. Here you can onboard users and create an onboarding flow, show and introduce new features, and much more.

Carousel example

To create the carousel effect, select the Full message type and click the Create Carousel button. You can add up to 10 cards (screens). Each card can have any combination of customizable Blocks.

Add, Rename, or Remove a card by selecting "Options" dropdown in the card list.

​
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+ See Example: Personalization.

​
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+ 
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
Android 5.1.9+ 
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>