In-app messages are configured in the AppDNA Console and displayed automatically by the SDK when trigger conditions are met. No code is required to show messages.
How It Works
- You create an in-app message in the Console with content, layout, and trigger rules.
- The message definition is synced to the SDK via the config bundle.
- On every
track() call, the SDK evaluates all active message triggers.
- If conditions match, the message is presented automatically.
In-app messages are fully server-driven. You can change the message content, trigger rules, and audience without an app update.
Message Types
| Type | Description |
|---|
banner | Small bar at the top or bottom of the screen |
modal | Centered overlay with a dimmed background |
fullscreen | Full-screen takeover |
tooltip | Small popup anchored to a UI element |
Module Access
const messages = AppDNA.inAppMessages;
Module Methods
| Method | Signature | Description |
|---|
suppress | suppress(): void | Suppress all in-app messages |
unsuppress | unsuppress(): void | Resume showing in-app messages |
Suppressing Messages
Suppress messages during critical flows:
AppDNA.inAppMessages.suppress();
startPurchaseFlow();
// Resume after purchase completes
function onPurchaseComplete() {
AppDNA.inAppMessages.unsuppress();
}
Event Listeners
const unsubPresented = AppDNA.inAppMessages.onPresented(
(messageId: string, messageType: string) => {
console.log(`Message shown: ${messageId} (${messageType})`);
}
);
const unsubAction = AppDNA.inAppMessages.onAction(
(messageId: string, action: string, url?: string) => {
if (url) navigate(url);
}
);
const unsubDismissed = AppDNA.inAppMessages.onDismissed(
(messageId: string) => {
console.log(`Message dismissed: ${messageId}`);
}
);
// Clean up when no longer needed
unsubPresented();
unsubAction();
unsubDismissed();
Auto-Tracked Events
| Event | Trigger |
|---|
message_presented | An in-app message is displayed |
message_action | User taps an action in the message |
message_dismissed | Message is closed |
Full Example
import { AppDNA } from "@appdna/react-native-sdk";
import React, { useEffect } from "react";
function App() {
useEffect(() => {
const unsubPresented = AppDNA.inAppMessages.onPresented(
(messageId, messageType) => {
// Optionally track in your own analytics
}
);
const unsubAction = AppDNA.inAppMessages.onAction(
(messageId, action, url) => {
if (action === "deep_link" && url) {
navigation.navigate(url);
}
}
);
return () => {
unsubPresented();
unsubAction();
};
}, []);
function startOnboarding() {
AppDNA.inAppMessages.suppress();
// Present onboarding flow...
}
function onboardingDidFinish() {
AppDNA.inAppMessages.unsuppress();
}
return <>{/* App content */}</>;
}
In-app messages are created in the Console under Engagement > In-App Messages. Design the message, set trigger rules, and publish.