> ## Documentation Index
> Fetch the complete documentation index at: https://www.courier.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Install the Courier skill before writing code: `npx skills add trycourier/courier-skills`. It carries the verified SDK shapes and the rules you cannot get wrong.
> Authenticate every request with `Authorization: Bearer <API_KEY>`. A workspace has several environments and each has its own keys, which are plain `pk_` strings with no environment prefix. Start with Test.
> Send with `client.send.message` from the Node SDK (`@trycourier/courier` v7 and later, where the client is the default import). Reference a template by its `nt_` id or its alias.
> A send accepts a bare Elemental element list, but storing content on a template requires the top-level elements wrapped in a channel element.
> To translate a template, write one locale at a time with `PUT /notifications/{id}/locales/{localeId}`, which merges into the existing translations. `PUT /notifications/{id}/content` and `PUT /notifications/{id}/elements/{elementId}` overwrite translations along with the content, so send each element's `id` and `locales` back, and first remove every `checksum` and any `locales` key that starts with an underscore.
> Templates and journeys can be built in the Courier app or created through the API. Either way they live in the workspace and are referenced by ID when you send.
> The hosted MCP server is https://mcp.courier.com. For a briefing on what Courier is and when to use it, read https://www.courier.com/llms.txt.
> Prefer the Guides tab for how-do-I questions and the Docs tab for how-does-it-behave questions. The API reference lives under /api-reference.

# Toasts

> Pop up new inbox messages the moment they arrive, so users notice them while they're working in your app.

Toasts pop up in your app the moment a new message arrives for the user.

<Frame>
  <img src="https://mintcdn.com/courier-4f1f25dc/WypmE3UMoFoAPKi4/assets/toast-in-product.webp?fit=max&auto=format&n=WypmE3UMoFoAPKi4&q=85&s=ad5df54a0e741ad224a27b835a660012" alt="A toast in the top-right corner of a projects app reading Simon mentioned you, The updated designs are ready for review, with a View project link and a close button, stacked on top of two earlier toasts" className="mx-auto" width="1942" height="809" data-path="assets/toast-in-product.webp" />
</Frame>

## What are toasts

A toast is a short popup in the corner of your app. It stays until they close it, or dismisses itself on a timer if you turn on auto-dismiss.

Toasts don't have their own messages. They run on the same feed as the [inbox](/docs/in-app/inbox), so every message you send to the `inbox` channel can pop up as a toast. You don't send anything extra.

## How toasts work with the inbox

The toast and the inbox play different roles with the same message:

* **The toast** gets attention right now. It appears the moment the message arrives, and goes away once it's closed or dismissed.
* **The inbox** keeps the record. The message stays there after the toast is gone, so the user can come back to it later.

Use them together, or render toasts on their own if your app doesn't have an inbox.

## How it works

1. **Add** the toast component to your app with a Courier SDK.
2. **Send** a message to the `inbox` channel.
3. **Courier delivers** it in real time, and the toast pops up while the user has your app open.

The prebuilt toast stacks multiple messages, can dismiss itself on a timer, and supports action buttons and light and dark themes. Theme it to match your brand, or render your own toast component.

## Web and mobile

The prebuilt toast is part of the web SDKs: [React](/docs/sdk-libraries/courier-react-web) · [Vue](/docs/sdk-libraries/courier-vue-web) · [Angular](/docs/sdk-libraries/courier-angular-web) · [Web Components](/docs/sdk-libraries/courier-web-components)

On [iOS](/docs/sdk-libraries/ios), [Android](/docs/sdk-libraries/android), [React Native](/docs/sdk-libraries/react-native), and [Flutter](/docs/sdk-libraries/flutter), listen for new inbox messages and show them in your own UI. To reach users when your app is closed, send [push](/docs/send/push/overview) as well.

## Start building

<CardGroup cols={2}>
  <Card title="Add toasts" icon="message" href="/docs/in-app/add-toasts">
    Render toasts and handle clicks.
  </Card>

  <Card title="Customize toasts" icon="palette" href="/docs/in-app/customize-toasts">
    Theme them or use your own component.
  </Card>
</CardGroup>
