In-App Messages
The OneSignal SDKs for iOS and Android support In-App Messaging (IAM), allowing developers to display rich, customizable UI directly within their apps. This functionality is ideal for onboarding flows, announcements, promotions, and more.
Official Documentation
For comprehensive use cases and configuration details, refer to the OneSignal In-App Messages Documentation.
Implementation Guide
The Median JavaScript Bridge exposes OneSignal In-App Messaging SDK methods, enabling you to manage triggers and message behavior:
↔️Median JavaScript Bridge
median.onesignal.iam.addTrigger({ key: value }); median.onesignal.iam.addTriggers({ key1: value1, key2: value2 }); median.onesignal.iam.removeTriggerForKey(key); median.onesignal.iam.getTriggerValueForKey(key); median.onesignal.iam.pauseInAppMessages(); median.onesignal.iam.resumeInAppMessages(); median.onesignal.iam.setInAppMessageClickHandler("function_name"); // Use the name of your click handler function as a string
Example Use Case: Onboarding New Users
Implementing an onboarding modal using In-App Messages helps guide new users, build trust, and may improve your app's approval chances in the App Store.
Demo Instructions
To see the onboarding experience in action:
- Wait at least 3 seconds after the app launches.
- Or click the "OneSignal Add Trigger" button in the In-App Messaging section.
Important
Ensure you’ve accepted push notification permissions to enable In-App Message delivery.
Live Demo
Note: In-app messages cannot be tested on Android using a virtual simulator. For this reason, only the iOS simulator is embedded in this article. You are able to test the Android In-App Messages on physical devices.
iOS Example App |
How to Build the Onboarding Modal
Below is the full implementation (HTML + JavaScript) of a simple onboarding modal as shown in the demo above. You can use this template when designing In-App Messages with the OneSignal HTML Composer.
Additional details on how to design an In-App Messages with the OneSignal HTML Composer can be found in the OneSignal Documentation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Median Onboarding Modal - OneSignal</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(6px);
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal {
background: #0d0d0d;
border-radius: 20px;
padding: 32px;
width: 75%;
max-width: 420px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.modal-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 16px;
color: #f4f7fa;
}
.modal-body {
font-size: 15px;
color: #c3c9d4;
margin-bottom: 24px;
text-align: left;
}
.modal-body ul {
padding-left: 20px;
margin: 12px 0;
}
.modal-body li {
margin-bottom: 8px;
}
.close-button {
background-color: #3b8fe6;
color: white;
border: none;
padding: 10px 24px;
font-size: 15px;
font-weight: 500;
border-radius: 10px;
cursor: pointer;
margin-bottom: 20px;
transition: background-color 0.2s ease;
margin-bottom: 16px;
}
.close-button:hover {
background-color: #2F7AD1;
}
.modal-logo {
width: 92px;
height: 92px;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="modal-overlay" id="onboardingModal">
<div class="modal">
<div class="modal-title">Onboarding Modal</div>
<div class="modal-body">
<p>Welcome! This demo shows how OneSignal features will work in your Median-powered app:</p>
<ul>
<li>View the OneSignal device configuration</li>
<li>Manage users and push consent</li>
<li>Trigger In-App Messages</li>
</ul>
</div>
<button class="close-button" onclick="OneSignalIamApi.close(e)">Close ✕</button>
<img src="https://uploads-ssl.webflow.com/6462308e001a70f67d5e9d4d/64a2c66f3686ddef6bd140b5_logo-white.svg" alt="Median Logo" class="modal-logo" />
</div>
</div>
<script>
document.querySelector(".close-button").addEventListener("click", function (e) {
if (typeof OneSignalIamApi !== 'undefined' && typeof OneSignalIamApi.close === 'function') {
OneSignalIamApi.close(e);
} else {
// Fallback: manually hide modal
document.getElementById("onboardingModal").style.display = "none";
}
});
</script>
</body>
</html>
Updated 3 days ago