---
title: "Notifications & Alerts"
description: "Route the Landing Page Editor's notifications into your own UI, or push your own notifications into the editor."
url: https://docs.topol.io/landing-page-editor/guide/notifications.html
---

# Notifications & Alerts

**Notifications flow in both directions**: the `disableAlerts` option with the `onAlert` callback routes the editor's toasts into your own notification system, and the `createNotification()` method pushes your application's messages into the editor. Both directions share one notification shape.

## The notification object

Notifications everywhere in the editor share one shape:

```typescript
{
  type: "info" | "error" | "success",  // required
  text: "The notification message",     // required
  title?: "Optional heading",
  persistent?: boolean,                 // stays until dismissed
  expectSideEffect?: boolean,
  extarnalUse?: boolean,                // note: spelling as implemented
  id?: string | number
}
```

There is no `warning` type and no `timestamp` field; the three types above are the complete list.

## `disableAlerts`

The `disableAlerts` option (`boolean`, default `false`) suppresses the editor's built-in toast UI and routes notifications to your `onAlert` callback instead. Notifications flagged `extarnalUse: true` are still rendered in-editor, and some low-level failures are logged to the browser console only and never surface as notifications.

> **WARNING**
>
> With `disableAlerts: true` and no `onAlert` handler, notifications are dropped entirely, not merely hidden. Users get no feedback about save status, errors, or operation outcomes. Always pair `disableAlerts: true` with an `onAlert` handler.

## Custom notifications with the onAlert callback

With `disableAlerts: true`, the `onAlert` callback is the main integration point for displaying notifications in your UI. Note that `disableAlerts` is a config option while `onAlert` is a callback passed next to `config`:

```js
const LPE = LandingPageEditor({
  config: {
    authorize: { apiKey: "YOUR_API_KEY", userId: "user-123" },
    disableAlerts: true, // Suppress default alerts
  },
  onAlert: ({ notification }) => {
    console.log("Notification:", notification.type, notification.text);
    yourNotificationSystem.show(notification);
  },
});
LPE.render("#landing-page-editor");
```

A few practical notes:

-   The message text is in `notification.text` (not `message`).
-   Notifications delivered to `onAlert` do **not** carry an `id`; generate your own key when rendering a toast list.
-   In practice most editor notifications are of type `error`; `success` and `info` are used sparingly, so filtering down to errors loses little:

```js
onAlert: ({ notification }) => {
  if (notification.type === "error") {
    yourNotificationSystem.show(notification);
  }
};
```

## Pushing notifications into the editor

The counterpart to `onAlert` is the `createNotification()` instance method, which displays your own notification inside the editor UI:

```js
LPE.createNotification({
  type: "success",
  text: "Saved to your CMS",
  title: "Done",
});
```

Only `type` and `text` are required. With `disableAlerts: true`, add `extarnalUse: true` to the notification, otherwise it is routed straight back out to your own `onAlert` handler instead of being rendered in the editor.