With Gleap, in-app notifications appear directly within the app when a new message is sent to a customer who has the app open. The same applies to news updates.
We also support push notification. Please see the push notifications documentation for more information on it.
Disable in-app notifications
The following method allows you to disable the in app notifications.
Gleap.setDisableInAppNotifications({ disableInAppNotifications: true });Notification container offset
You can adjust the position of the in-app notification container by setting an offset in pixels:
Gleap.setNotificationContainerOffset({ x: x, y: y });x – Horizontal offset in pixels (positive values move the container to the right).
y – Vertical offset in pixels (positive values move the container down).
Inline banners
Inline banners (the banner style you pick in the Gleap dashboard) are shown at the top of the screen and cover the status bar. Floating banners float above the app as a card. By default both overlay your app. On the web the Gleap JavaScript SDK pushes the page down itself. In the Android and iOS apps the banner is drawn natively over the WebView, so to push your page down below inline banners (SDK 19.3.0 or later), pad it by the banner's height. The height arrives as the banner-height-changed event, in CSS pixels from the top edge (0 when no inline banner is shown; floating banners stay at 0):
const applyBannerHeight = (height: number) =>
document.documentElement.style.setProperty("--gleap-banner-height", `${height}px`);
await Gleap.setEventCallback((message) => {
if (message?.name === "banner-height-changed") {
applyBannerHeight(message.data);
}
});
await Gleap.initialize({ API_KEY: "YOUR_API_KEY" });
applyBannerHeight((await Gleap.getBannerHeight()).height);body {
/* The banner covers the status bar, so it replaces the top safe-area inset while shown. */
padding-top: max(var(--gleap-banner-height, 0px), env(safe-area-inset-top));
transition: padding-top 0.25s ease-out;
}