@trycourier/courier-ui-toast
Advanced tools
Embed customizable toast notifications in your web app using Web Components. Courier Toast provides the <courier-toast> element that works with any JavaScript framework or vanilla JS. Toasts are synced with the feed of Courier Inbox messages.
Using React? Check out the Courier React SDK for React-native components and hooks.
npm install @trycourier/courier-ui-toast
Works with any JavaScript build system; no additional build configuration required.
<body>
<courier-toast></courier-toast>
<script type="module">
import { Courier } from "@trycourier/courier-ui-toast";
// Generate a JWT for your user on your backend server
const jwt = "your-jwt-token";
// Authenticate the user
Courier.shared.signIn({
userId: "your-user-id",
jwt: jwt,
});
</script>
</body>
The SDK requires a JWT (JSON Web Token) for authentication. Always generate JWTs on your backend server, never in client-side code.
If you've already set up authentication for Courier Inbox, you can skip this step; toasts and inbox share an authentication mechanism.
curl --request POST \
--url https://api.courier.com/auth/issue-token \
--header 'Authorization: Bearer $YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--data '{
"scope": "user_id:$YOUR_USER_ID inbox:read:messages inbox:write:events",
"expires_in": "1 day"
}'
auto-dismiss, auto-dismiss-timeout-ms)onToastItemClick() and onToastItemActionClick() for toast and action button clickssetLightTheme() and setDarkTheme()setToastItemContent) or entire toast items (setToastItem)CourierToastDatastore.shared.addMessage() and removeMessage() for programmatic controlFull documentation: courier.com/docs/sdk-libraries/courier-ui-toast-web
Have an idea or feedback about our SDKs? Let us know!
Open an issue: Courier Web Issues
FAQs
Toast components for the Courier web UI
The npm package @trycourier/courier-ui-toast receives a total of 4,367 weekly downloads. As such, @trycourier/courier-ui-toast popularity was classified as popular.
We found that @trycourier/courier-ui-toast demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Five malicious NuGet packages impersonate Chinese .NET libraries to deploy a stealer targeting browser credentials, crypto wallets, SSH keys, and local files.
Security News
pnpm 11 turns on a 1-day Minimum Release Age and blocks exotic subdeps by default, adding safeguards against fast-moving supply chain attacks.
Security News
The remediated findings include organization permission bugs, stale project access after transfers, OIDC replay edge cases, audit logging gaps, and an IDOR in API token deletion.