This repository, also called In-App, is a set of features and components that can work inside our customers websites. Courier is a powerful application but integrating all of the features into your frontend manually can be overwhelming and time consuming. This is where In-App steps up and can superpower your application by providing Realtime Messaging (Toast), an Inbox, Notification Preferences, and many more coming soon!
Want to use packages with other frameworks/libraries like angular or vue? Check out how to do Embedded Integration
We've recently created both 2.X and 3.X releases related to this monorepository. This is because we've migrated to a new simpler, streamlined style for our components and there are breaking changes with props and api. Below is a short description of each of our versions:
The 1.X versions will consist of our old UX, and use our legacy APIs. If you are a free tier customer your data retention on 1.X will be limited to 30 days and subject to change.
We introduced a new theme that makes the UX smaller and simplifies the UX. Some of the notable changes are:
- Single list design - no more tabs
- Entire message is clickable vs having action buttons
- Make all actions (read/unread/archive) displayable without having to click into a menu
- Expose "archive" as an action
The 2.X version will now default to this new theme and will utilize our new API that does not have the same data retention as the legacy API.
You can still access the 1.X designs by passing theme.name === "classic" to the Inbox component
We created a separate breaking change branch to make sure our bundles are small and optimized. We didn't want to bundle any uneccesary code to support the "classic" theme so 3.0 has removed all the deprecated code. There are breaking changes and a
Version 4 adds support for Tenants, which is useful for modeling multi-tenant notification environments. Version 4 makes a single breaking change from Version 3, Accounts (Beta) was renamed to Tenants. If you were not using Accounts (Beta), you can safely upgrade from v3 to v4 without making code changes. Otherwise, see migration guide below.
- In CourierProvider, change
accountIdtotenantId. - Thats all.
Before:
<CourierProvider
accountId={"YOUR_ACCOUNT_ID"}
clientKey={props.clientKey}
userId={props.userId}
apiUrl={props.apiURL}
wsOptions={{
url: props.wsURL,
}}
authorization={props.authorizationToken}
>
{props.children}
</CourierProvider>After:
<CourierProvider
tenantId={"YOUR_TENANT_ID"}
clientKey={props.clientKey}
userId={props.userId}
apiUrl={props.apiURL}
wsOptions={{
url: props.wsURL,
}}
authorization={props.authorizationToken}
>
{props.children}
</CourierProvider>Full Changelog: https://github.com/trycourier/courier-react/compare/v3.16.0...v4.0.0
This package imports the other react components and bundles them up using webpack and preact to create a bundle that can be used to render all of our components in a frontend that does NOT use React.
This package exports a component called CourierProvider which creates a context object that is required for the following packages.
Toast is a non modal, component used to display brief, optional-expiring windows of information to a user. This can be integrated with a push provider or can be triggered manually.
Inbox is a component used to display a history of read and unread messages to a user. If we send a message to a user when they are not logged in, or if they didn't interact with the message before it disappeared, we also have an Inbox to show the history of messages received.
hooks that can be used to build your own inbox or interact with other parts of Courier.
- useInbox
- usePreferenes
GraphQL library that interacts with Courier's backend
The "React Brand Designer" package provides components with a slick UI for branding notifications delivered with Courier. This enables your own users to personalize their brand-able notifications like emails without leaving your app or site.
Utility package to share common Typescript types and interfaces shared between packages
Our development environment. This package depends on all the other packages and imports them into a storybook instance. This allows us to develop in an isolated environment.