Skip to main content
Inbox web preview Courier toasts are available for JavaScript and React applications to embed popup notifications with just a few lines of code. 
import { useCourier, CourierToast } from "@trycourier/courier-react";

export default function App() {
  const courier = useCourier();

  useEffect(() => {
    // Authenticate the user
    courier.shared.signIn({ userId, jwt });
  }, []);

  // Add the Toast component
  return <CourierToast />;
}
Sample Apps: See complete working examples in our React Toast sample app, Vanilla JS Toast sample app.
Check out documentation for each of the toast SDKs: For iOS, Android, and other mobile toast-style notifications, consider using Courier’s push integrations.
New: v8 of the Courier React SDK and v1 of the new Courier Web Components SDK have recently been released.We recommend new integrations use these SDKs and existing apps migrate. Check out the Courier React v8 migration guide for more information and links to documentation for earlier versions of the SDKs.

​
Powered by Courier Inbox

Toasts are powered by the same feed of messages delivered to Courier Inbox. Use Courier Inbox to provide a persistent notification center and toasts to quickly bring attention to an alert, no matter where a user is in your app. See the integration docs for React or Web Components for more information on using the two notification components.

​
A modern UI - that’s completely customizable

Toasts come out of the box with a clean, modern UI including subtle animations and intelligent stacking. The Courier SDKs enable theming, partial, and full customization to match your brand and product requirements while still taking advantage of the underlying components and message management where possible. For integrations that require it, the SDKs also expose low-level APIs you can build on.

​
Real-time delivery and syncing

Notifications are inherently time-sensitive, and toasts are delivered in real-time across devices. Since toast messages are Inbox messages, the SDKs also enable real-time state syncing — the ability to mark a toast and its message read, opened, archived, etc. — and have that state reflected across platforms and components.

​
Next Steps

Setup Authentication

Setup auth for toasts and integrate an SDK

Send a Message

Start sending notifications