​
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. No-margin mode requires SDK versions: iOS 3.9.0+, Android 4.6.3+. Older SDKs will show with margins.
CarouselMulti-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+

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"/>