​
Overview

OneSignal’s drag-and-drop editor allows you to build in-app messages using modular block elements — no coding required. If you prefer markup, see Design In-App Messages with HTML.

IAM drag and drop editor

​
Prerequisites

  • OneSignal SDK installed and initialized in your app.
  • Recommended SDKs for latest features: iOS 5.1.5+, Android 5.1.9+. See specific feature minimums below.
  • Images hosted on a performant CDN (recommended if self-hosted) and sized appropriately.

​
Message types (Layout)

How the message appears on screen:
Message TypeDescription
TopSlides down from the top. Good for slim announcements and confirmations.
CenterExpands from the center and partially fills the screen. Balanced for most use cases.
BottomSlides up from the bottom. Great for snackbars and consent prompts.
FullExpands to fill the screen. Use with or without margins. Add a Carousel for multi‑screen flows.

Image showing types of In-Apps you can create.

​
Carousels

Carousels let you create multi‑screen flows—onboarding, feature tours, or multi‑step offers. 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.

Carousel example

​
Orientation support

In-app messages support both portrait and landscape modes.

Image showing portrait and landscape orientations.

​
Blocks & layout settings

Everything sits inside a Background block (the canvas). Use Padding on the Background for outer spacing; use Margin on individual blocks for spacing between elements. Quick rules for consistent layouts
  1. Use Padding to control distance from message edges.
  2. Use Margin to separate blocks (e.g., headline → button).
  3. Avoid stacking large padding and margins on the same side.
  4. Prefer centered, flow‑based layouts over absolute positioning.
  5. Always Preview on different devices before publishing.

Background block (canvas)

​
Text

Use for headlines, descriptions, or personalized copy.
  • Responsive sizing: Width/height in percentages.
  • Fonts: Google Fonts.
  • Formatting: Bold, italic, underline.
  • Color: Hex or RGBA (supports transparency).
  • Alignment: Left, center, right.
  • Size: Adjustable font size.
Advanced
  • Margins: Space around the block.
Tips

Text block

​
Image

Add images to illustrate features or offers. Formats: .jpg, .png, .gif (max 5MB). Prefer hosted URLs for performance.
  • Aspect ratios: 16:9, 4:3, 3:2 recommended.
  • Click action: Optional (link, deep link, tag, outcome, prompt).
Advanced:
  • Dismiss on click
  • Margins: Space around the block.
Tips
  • Reference different images on your server based on tags. See Dynamic URLs.
    • Example image URL: https://example.com/images/{{ tag_key }}.png

Image block

​
Button

Drive actions like navigation, feedback, or permission prompts.
  • Text & font: Customize CTA copy and style.
  • Color & size: Customize button visuals.
  • Image: Optional icon/image.
  • Corner radius: Set rounding.
  • Click action: Supports tagging, outcomes, prompts, and deep links.
Advanced
  • Dismiss on click
  • Margins: Space around the block.
  • Borders & shadows: Fully customizable.
Tips
  • Personalize button copy or links with data tags.
  • Make an image‑only button by setting background opacity = 0.
  • Use subtle shadows (low opacity, high blur) to lift primary CTAs.

Button block

​
Close button

Control visibility and style of the dismiss (X) icon.
  • Toggle: Enable/disable.
  • Custom icon: .jpg, .png, .svg, .gif. Recommended size: 10x10px.
  • Click action: Optional.
Advanced
  • Margins: Space around the block.
Tips
  • If you disable the close button, make sure to set a dismiss action or close time to allow users to exit.
  • Useful for carousels when you want users to progress through all cards.

Close button

​
Background

Set the foundation for your layout and branding.
  • Image support: .jpg, .png, .gif
  • Color: Supports RGBA
  • Click action: Optional
Advanced
  • Padding: Space between content and message edges (default 24px)
  • Dismiss on click

Background editor

​
Personalization & localization

Use data tags to personalize the in-app on a per-user basis. For localization, see Multi-langauge messages for more details.

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