---
title: "Ionic Capacitor SDK: In-app notifications"
description: "Configure in-app notifications for customer messages with the Gleap Ionic Capacitor SDK. Follow the integration code examples."
url: https://docs.gleap.ai/en/articles/570-ionic-capacitor-sdk-in-app-notifications
collection: "Ionic / Capacitor"
updated: 2026-11-01
language: en
---

# Ionic Capacitor SDK: In-app notifications

Configure in-app notifications for customer messages with the Gleap Ionic Capacitor SDK. Follow the integration code examples.

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.

```js
Gleap.setDisableInAppNotifications({ disableInAppNotifications: true });
```

## Notification container offset

You can adjust the position of the in-app notification container by setting an offset in pixels:

```js
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):

```typescript
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);
```

```css
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;
}
```

## Related

- [Ionic Capacitor SDK setup](https://docs.gleap.ai/en/articles/563-ionic-capacitor-sdk-setup.md)
- [Ionic Capacitor SDK: User identity](https://docs.gleap.ai/en/articles/564-ionic-capacitor-sdk-user-identity.md)
- [Ionic Capacitor SDK: Frontend tools](https://docs.gleap.ai/en/articles/565-ionic-capacitor-sdk-frontend-tools.md)
- [Ionic Capacitor SDK: Track events](https://docs.gleap.ai/en/articles/566-ionic-capacitor-sdk-track-events.md)
- [Ionic Capacitor SDK: Track pages](https://docs.gleap.ai/en/articles/567-ionic-capacitor-sdk-track-pages.md)