> For the complete documentation index, see [llms.txt](https://developer.usemultiplier.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.usemultiplier.com/multiplier-embed-sdks/notifications.md).

# Notifications

{% hint style="info" %}
The SDK's default notifications automatically close after 5000ms (5 seconds), so you don't need to implement a close mechanism.
{% endhint %}

The SDK includes a built-in notification component that displays error messages and other alerts. You can customize how notifications are displayed or hide them completely using the `renderNotification` prop on `MultiplierGlobalConfigProvider`.

### How to Hide Notifications

To completely hide the SDK's notifications, pass a `renderNotification` function that returns `null`:

{% code title="App.tsx" %}

```tsx
import { MultiplierGlobalConfigProvider } from '@Multiplier-Core/partner-sdk-react';

function App() {
  const config = createGlobalConfig()
    .setAccessToken('your-token')
    .setEnvironment('production')
    .build();

  return (
    <MultiplierGlobalConfigProvider 
      config={config}
      renderNotification={() => null}
    >
      {/* Your app components */}
    </MultiplierGlobalConfigProvider>
  );
}
```

{% endcode %}

### How to Render Custom Notifications

You can provide your own notification component to replace the SDK's default notifications.

#### Basic Custom Notification

{% code title="App.tsx" %}

```tsx
import { 
  MultiplierGlobalConfigProvider,
  NotificationProps 
} from '@Multiplier-Core/partner-sdk-react';

function App() {
  const config = createGlobalConfig()
    .setAccessToken('your-token')
    .setEnvironment('production')
    .build();

  const renderCustomNotification = (props: NotificationProps) => {
    const { notifications, onClose, onCloseAll } = props;

    if (!notifications || notifications.length === 0) {
      return null;
    }

    return (
      <div className="custom-notification-container">
        {notifications.map((notification) => (
          <div key={notification.id} className="custom-notification">
            <span>{notification.title}</span>
            <button onClick={() => onClose(notification.id)}>×</button>
          </div>
        ))}
        {notifications.length > 1 && (
          <button onClick={onCloseAll}>Close All</button>
        )}
      </div>
    );
  };

  return (
    <MultiplierGlobalConfigProvider 
      config={config}
      renderNotification={renderCustomNotification}
    >
      {/* Your app components */}
    </MultiplierGlobalConfigProvider>
  );
}
```

{% endcode %}

#### NotificationProps Interface

| Property            | Type                             | Description                                             |
| ------------------- | -------------------------------- | ------------------------------------------------------- |
| `notifications`     | `NotificationInfo[]`             | Array of notification objects to display                |
| `isCollapsed`       | `boolean`                        | Whether the notifications are currently collapsed       |
| `onClose`           | `(id: number \| string) => void` | Function to close a specific notification by ID         |
| `onCloseAll`        | `() => void`                     | Function to close all notifications                     |
| `onToggleCollapsed` | `() => void`                     | Function to toggle the collapsed state of notifications |

Each notification object in the `notifications` array contains:

* `id`: Unique identifier for the notification (string or number)
* `title`: The notification message text

### Integration with Third-Party Libraries

You can integrate the SDK's notifications with popular notification libraries. Simply map the `notifications` array to your preferred notification library's API within the `renderNotification` function.

* react-toastify: Display SDK notifications as toast messages
* sonner: Use Sonner's toast system for notifications
* react-hot-toast: Show notifications using react-hot-toast
* Custom notification systems: Integrate with your existing notification infrastructure

{% hint style="info" %}
Notes:

* The `renderNotification` prop is optional. If not provided, the SDK uses its default notification component.
* Returning `null` from `renderNotification` will hide all notifications.
* Returning `undefined` from `renderNotification` will resume using the SDK's default notification UI.
* Notifications are automatically triggered by the SDK for errors and important messages.
* You have full control over the styling, positioning, and behavior of custom notifications.
  {% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developer.usemultiplier.com/multiplier-embed-sdks/notifications.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.