Design in-app messages with HTML
Learn how to design and customize full-screen in-app messages using OneSignal’s HTML Editor for greater flexibility, responsiveness, and branding.
Overview
Image illustrating code in-app code beside a rendered in-app
OneSignal offers two in-app message editing experiences: a Drag and Drop GUI and the more advanced HTML Editor. The HTML Editor enables complete control over the appearance, behavior, and responsiveness of full-screen in-app messages.
What you can do with the HTML Editor:
- Layouts: Create complex layouts including side-by-side buttons.
- Media: Embed videos, animations, slides, and more.
- Responsiveness: Optimize for portrait, landscape, and multiple device sizes.
- Forms: Embed forms directly into your in-apps.
- Fonts: Use custom fonts to match your brand.
The HTML Editor is ideal for developers fluent in HTML, CSS, and JavaScript. For non-technical users, we recommend the drag-and-drop editor.
Getting started
To enable the full-screen in-app experience, upgrade your SDK to the following versions:
- 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.
Tips:
- Target older apps: Use our Segmentation tool to deliver GUI-based in-apps to users on older SDKs.
- Start fast: Try one of our pre-built templates or copy directly from GitHub.
Step 1: Create a new in-app message
Go to Messages > New In-App to create, edit, test, pause, duplicate, or delete your in-app messages.
Step 2: Use the HTML Editor
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
Find HTML templates in our GitHub repo.
Key features
Click support
With the In-App JS Library, you can track interactions and trigger in-app behaviors.
- Track elements using
data-onesignal-unique-label
:
- Bind click actions with JavaScript:
Learn more in the In-App JS Library documentation.
Asset support
You can load images, videos, fonts, and other assets in your in-apps. Assets are fetched at render time.
Example:
Tag substitution (personalization)
Dynamically insert user data with tag substitution. For example:
Supported contexts:
- Text inside elements like
div
,p
,li
- Inside
<style>
blocks href
,src
,action
, anddata
attributes
Not supported in:
<script>
tags- Nested content structures, e.g.:
Best practices
Design responsively
Use CSS media queries to adapt layouts to various screen sizes.
Test across devices
Send test messages frequently to confirm behavior and layout across device types.
Use alt tags for accessibility
Add alt
text to images for screen reader compatibility.
Format HTML accessibly
Name and format elements clearly to support accessibility tools like screen readers.
Account for safe areas (notches)
Modern devices have safe areas (like notches or home bars). Use safe-area-inset-*
variables to pad your layout:
Optimize images for mobile
Reduce file sizes and use proper resolution:
*OneSignal has no affiliation with imagekit.io, though it’s a helpful tool for optimization.
Sample in-app HTML
We provide a default in-app template when loading the HTML Editor. It includes common methods from our JS Library.
FAQ
Can I reuse in-app templates from other providers?
Can I reuse in-app templates from other providers?
Yes. Copy and paste your HTML into our editor. You’ll need to update it to use our JS library methods for analytics and actions.
I don’t have templates. How do I start?
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?
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?
Do in-app messages work offline?
No. Messages require an active internet connection to fetch and render content.