Showing Notifications

The CE.SDK editor brings a notification API designed to deliver non-intrusive messages to the user, appearing in the lower right corner of the user interface. Use them to convey information without disrupting the user's current workflow. It provides a range of customization options to fit your specific needs.

cesdk.ui.showNotification(notification: string | Notification): string displays a new notification to the user, accepting either a simple string message or a more complex notification object that allows for additional configuration options (detailed below). It returns an id of the notification.
cesdk.ui.updateNotification(notificationId: string, notification: Notification): updates a notification given by the id. All configuration options can be changed. If the notificationId` doesn't exist or the notification has already been dismissed, this action will have no effect.
cesdk.ui.dismissNotification(notificationId: string) removes a notification identified by the provided notification notificationId. If the notificationId doesn't exist or the notification has already been dismissed, this action will have no effect.

Notification Options#

All options apart from message are optional

Option	Description
Option `message`	Description The message displayed on the notification. This can either be a string or an internationalization (i18n) key from the CE.SDK translations, allowing for localized messages.
Option `type`	Description Notifications can be displayed in various styles, each differing in appearance to convey the appropriate context to the user. The available types include `info` (which is the default setting), `warning`, `error`, `success`, and `loading` (which displays a loading spinner).
Option `duration`	Description Notifications typically disappear after a set period, but the duration can vary based on the message's importance. Less critical updates may vanish swiftly, whereas warnings or significant alerts stay open for a longer time. You can specify this duration using either a numerical value representing milliseconds or predefined strings from CE.SDK, such as `short`, `medium` (which is the default setting), or `long`, each corresponding to different default durations. For notifications that should remain visible indefinitely, the `infinite` value can be used to prevent automatic dismissal.
Option `onDismiss`	Description A callback function that is triggered upon the dismissal of the notification, whether it's done automatically, programmatically, or manually by the user.
Option `action: { label: "Retry", onClick: () => void }`	Description Adds a single action button within the notification for user interaction.


CreativeEditorSDK.create('#cesdk', config).then(async (cesdk) => {

  await cesdk.addDefaultAssetSources();
  await cesdk.addDemoAssetSources();

  await cesdk.createDesignScene();

  cesdk.ui.showNotification("Welcome to our editor!");

  const notificationId = cesdk.ui.showNotification({
    type: 'loading', message: 'Loading data...', duration: 'infinite'
  });
  setTimeout(() => {
    cesdk.ui.updateNotification(notificationId, {
      type: 'success', message: "Data loaded", duration: 'short'
    });
  }, 5000);