@trycourier/courier-ui-inbox 2.2.1 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +49 -40
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +195 -53
  5. package/dist/index.mjs.map +1 -1
  6. package/dist/types/courier-inbox-theme.d.ts +7 -0
  7. package/dist/utils/sanitize-html.d.ts +17 -0
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -1,73 +1,82 @@
1
- <img width="1040" alt="courier-ui-inbox" src="https://github.com/user-attachments/assets/6227249b-d008-4719-bddc-874f34432376" />
1
+ <!-- AUTO-GENERATED-OVERVIEW:START — Do not edit this section. It is synced from mintlify-docs. -->
2
+ # Courier Inbox Web Components
2
3
 
3
- **Using React?** Use the [@trycourier/courier-react](../courier-react/) package.
4
+ Embed a customizable in-app notification center in your web app using Web Components. Courier Inbox provides `<courier-inbox>` and `<courier-inbox-popup-menu>` elements that work with any JavaScript framework or vanilla JS.
5
+
6
+ > **Using React?** Check out the [Courier React SDK](https://github.com/trycourier/courier-web/tree/main/%40trycourier/courier-react) for React-native components and hooks.
4
7
 
5
8
  ## Installation
6
9
 
7
- ```sh
10
+ ```bash
8
11
  npm install @trycourier/courier-ui-inbox
9
12
  ```
10
13
 
11
- ## Usage
12
-
13
- Check out the [Courier documentation](https://www.courier.com/docs/sdk-libraries/courier-ui-inbox-web) for a full guide to Courier Inbox Web Components.
14
-
15
- ## Examples
14
+ Works with any JavaScript build system; no additional build configuration required.
16
15
 
17
- Below are a few examples of the Courier Inbox. Visit the [Courier documentation](https://www.courier.com/docs/sdk-libraries/courier-ui-inbox-web) for more examples.
18
-
19
- ### `courier-inbox`
20
-
21
- <img width="688" alt="Screenshot 2025-06-25 at 2 32 30 PM" src="https://github.com/user-attachments/assets/93246c34-3c5a-475e-8e83-7df6acf9bdf3" />
16
+ ## Quick Start
22
17
 
23
18
  ```html
24
19
  <body>
25
-
26
20
  <courier-inbox id="inbox"></courier-inbox>
27
21
 
28
22
  <script type="module">
29
- import { Courier } from '@trycourier/courier-ui-inbox';
23
+ import { Courier } from "@trycourier/courier-ui-inbox";
30
24
 
31
- // Generate a JWT for your user (do this on your backend server)
32
- const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
25
+ // Generate a JWT for your user on your backend server
26
+ const jwt = "your-jwt-token";
33
27
 
34
- // Authenticate the user with the inbox
28
+ // Authenticate the user
35
29
  Courier.shared.signIn({
36
- userId: $YOUR_USER_ID,
37
- jwt: jwt
30
+ userId: "your-user-id",
31
+ jwt: jwt,
38
32
  });
39
33
  </script>
40
-
41
34
  </body>
42
35
  ```
43
36
 
44
- ### `courier-inbox-popup-menu`
45
-
46
- <img width="602" alt="Screenshot 2025-06-25 at 2 33 17 PM" src="https://github.com/user-attachments/assets/c3b7f4cc-26c1-4be6-9ed5-a3fc3c0b335b" />
37
+ For a popup menu instead:
47
38
 
48
39
  ```html
49
- <body>
40
+ <courier-inbox-popup-menu id="inbox"></courier-inbox-popup-menu>
41
+ ```
50
42
 
51
- <div style="padding: 24px;">
52
- <courier-inbox-popup-menu id="inbox"></courier-inbox-popup-menu>
53
- </div>
43
+ ## Authentication
54
44
 
55
- <script type="module">
56
- import { Courier } from '@trycourier/courier-ui-inbox';
45
+ The SDK requires a JWT (JSON Web Token) for authentication. **Always generate JWTs on your backend server, never in client-side code.**
57
46
 
58
- // Generate a JWT for your user (do this on your backend server)
59
- const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
47
+ 1. Your client calls your backend to request a token.
48
+ 2. Your backend calls the [Courier Issue Token endpoint](https://www.courier.com/docs/api-reference/authentication/create-a-jwt) using your API key.
49
+ 3. Your backend returns the JWT to your client and passes it to the SDK.
60
50
 
61
- // Authenticate the user with the inbox
62
- Courier.shared.signIn({
63
- userId: $YOUR_USER_ID,
64
- jwt: jwt
65
- });
66
- </script>
67
-
68
- </body>
51
+ ```bash
52
+ curl --request POST \
53
+ --url https://api.courier.com/auth/issue-token \
54
+ --header 'Authorization: Bearer $YOUR_API_KEY' \
55
+ --header 'Content-Type: application/json' \
56
+ --data '{
57
+ "scope": "user_id:$YOUR_USER_ID inbox:read:messages inbox:write:events",
58
+ "expires_in": "1 day"
59
+ }'
69
60
  ```
70
61
 
62
+ ## Features
63
+
64
+ - **Tabs and Feeds** — organize messages with filterable tabs and multiple feeds
65
+ - **Click Handling** — `onMessageClick()`, `onMessageActionClick()`, `onMessageLongPress()`
66
+ - **Theming** — full light/dark theme support with `setLightTheme()` and `setDarkTheme()`
67
+ - **Custom Elements** — replace list items, headers, menu buttons, and state views
68
+ - **Programmatic Control** — `selectFeed()`, `selectTab()`, `refresh()`, and more
69
+
70
+ ## Documentation
71
+
72
+ Full documentation: **[courier.com/docs/sdk-libraries/courier-ui-inbox-web](https://www.courier.com/docs/sdk-libraries/courier-ui-inbox-web/)**
73
+
74
+ - [Theme reference](https://www.courier.com/docs/sdk-libraries/courier-ui-inbox-web-theme/)
75
+ - [React SDK (wrapper)](https://www.courier.com/docs/sdk-libraries/courier-react-web/)
76
+ - [Inbox implementation tutorial](https://www.courier.com/docs/tutorials/inbox/how-to-implement-inbox/)
77
+ - [Sample app (Vanilla JS)](https://github.com/trycourier/courier-samples/tree/main/web/vanilla/inbox)
78
+ <!-- AUTO-GENERATED-OVERVIEW:END -->
79
+
71
80
  ## Share feedback with Courier
72
81
 
73
82
  Have an idea or feedback about our SDKs? Let us know!