​
Overview

OneSignal offers two in-app message editors:
  • Drag & Drop GUI for non‑technical creators
  • HTML Editor for developers who want pixel‑perfect control over layout, behavior, and responsiveness.

Image illustrating code in-app code beside a rendered in-app

What you can do with the HTML Editor:
  • Layouts: Build complex responsive layouts (e.g., side‑by‑side CTAs).
  • Forms: Collect inputs inline (email, feedback, survey).
  • Fonts & Brand: Use custom web fonts and CSS variables.
  • JS Actions: Track clicks, tag users, send outcomes, and more.

​
Requirements

  • iOS: 3.9.0+
  • Android: 4.6.3+
    • If your app uses an older SDK, in-app messages will render in a Center Modal layout instead.

​
Create & preview an HTML In‑App

Go to Messages > New In-App to create, edit, test, pause, duplicate, or delete your in-app messages.

HTML Templates

Start quickly with pre-built templates.

In-app JavaScript Library

Use our JavaScript library to track interactions and trigger in-app behaviors.
Enter your HTML code on the left-hand side and preview it live. Use Send Test In-App to test responsiveness and design.

Image showing the HTML Editor beside the preview

​
Add trackable labels

Add data-onesignal-unique-label on interactive elements so clicks are tracked and actionable. 
<button class="tag-user" data-onesignal-unique-label="my-tag-user-button">Tag User</button>

​
Bind click actions with JavaScript

// Tag the user when they click a button
document.querySelector(".tag-user").onclick = (e) => {
  OneSignalIamApi.tagUser(e, { fiz: "baz" });
};
Learn more in the In-App JS Library documentation.

​
Asset support

Assets load at render time from the URLs you provide. 
<img src="https://media.onesignal.com/iam/default_image_20200320.png" alt="Promo" />

​
Personalization

Dynamically insert user data values using Liquid syntax: 
<div>Hi there {{ name | default: 'you' }}!</div>
Supported contexts:
  • Text inside elements like div, p, li
  • Inside <style> blocks
  • In attributes href, src, action, and data
Not supported in:
  • Inside <script> tags
  • Across complex nested content where parsing becomes ambiguous e.g.:
<div>
  Hi {{name}}
  <span>Here's your coupon!</span>
</div>

​
Accessibility & responsive design

Use CSS media queries and platform typography to adapt to device size and OS text settings. 
@media only screen and (max-width: 620px) {
  .btn-primary { width: 100% !important; }
}
/* Respect dynamic text sizes on iOS */
:root { font: -apple-system-body; }

​
Safe areas (notches, home bars)

Modern devices have safe areas (like notches or home bars). Use safe-area-inset-* variables to pad your layout: 
body {
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
  padding-left: var(--safe-area-inset-left);
  margin: 0;
}

​
Performance tips

  • Prefer inline critical CSS; defer heavy scripts.
  • Optimize images (dimensioned <img> with object-fit), use modern formats when possible.
  • Keep HTML payloads concise; avoid large base64 blobs.
  • Use system fonts or host performant web fonts with font-display: swap.
  • Reduce file sizes and use proper resolution:

​
Test across devices

Send test messages frequently to confirm behavior and layout across device types. See Find & set test subscriptions.

​
FAQ

​
Can I remove the gray background or drop shadow from banner-style in-apps?

Yes. For top/bottom banners, update your SDKs and set: 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"/>

​
Can I reuse in-app templates from other providers?

Yes. Paste your HTML into the editor and replace analytics/actions with the OneSignal In‑App JS methods.

​
I don’t have templates. How do I start?

Use the provided starter template or browse available templates. Some HTML/CSS experience is recommended.

​
What SDK version is required?

  • iOS: 3.9.0+
  • Android: 4.6.3+
Older SDKs will fall back to Center Modal rendering.

​
Do in-app messages work offline?

No. Messages require an active internet connection to fetch and render content.