## 1. Install
```sh
npm install @trycourier/courier-ui-inbox
```
> **Using React?** We suggest you use [@trycourier/courier-react](../courier-react/README.md) package instead.
## 2. Authenticate
To use the SDK, you need to generate a JWT (JSON Web Token) for your user. **This JWT should always be generated by your backend server, never in client-side code.**
**How it works:**
1. **Your frontend calls your backend:**
- When your app needs to authenticate a user, your frontend should make a request to your own backend (e.g., `/api/generate-courier-jwt`).
2. **Your backend calls Courier to issue a JWT:**
- In your backend endpoint, use your [Courier API Key](https://app.courier.com/settings/api-keys) to call the [Courier JWT Token Endpoint](https://www.courier.com/docs/reference/auth/issue-token) and generate a JWT for the user.
- Your backend then returns the JWT to your frontend.
To quickly test JWT generation (for development only), you can use the following cURL command to call Courier's API directly. **Do not use this in production or from client-side code.**
```sh
curl --request POST \
--url https://api.courier.com/auth/issue-token \
--header 'Accept: application/json' \
--header 'Authorization: Bearer $YOUR_API_KEY' \
--header 'Content-Type: application/json' \
--data \
'{
"scope": "user_id:$YOUR_USER_ID write:user-tokens inbox:read:messages inbox:write:events read:preferences write:preferences read:brands",
"expires_in": "$YOUR_NUMBER days"
}'
```
## 3. Add Inbox Component
### `courier-inbox`
```html
```
### `courier-inbox-popup-menu`
```html
```
## Handle Clicks and Presses
```html
```
## Styles and Theming
### Light & Dark Themes
The fastest way to style the Inbox to match your app. This example shows unread indicator styling, but you can customize fonts, icons, text, and more.
> **🎨 Theme Reference:** [All available theme values](./docs/theme.md)
```html
```
### Popup Alignment, Positioning, and Dimensions
```html
...
```
### Custom height `courier-inbox`
> **Important:** The default `courier-inbox` height is auto. It will set it's height based on it's children.
```html
...
```
## Custom Elements
Customize the inbox UI with any element you want.
### List Items
```html
```
### Header
```html
```
### Popup Menu Button
```html
```
### Loading, Empty, Error & Pagination
```html
```
> **Using React?** We suggest you use [@trycourier/courier-react](../courier-react/README.md) package instead.
# **Share feedback with Courier**
We want to make this the best SDK for managing notifications! Have an idea or feedback about our SDKs? Let us know!
[Courier Web Issues](https://github.com/trycourier/courier-web/issues)