Get Started with Courier Inbox

Courier Inbox SDKs are available for web and mobile to embed a fully customizable notification center into your app with just a few lines of code. See complete working examples in our React Inbox sample app and JavaScript Inbox sample app.

import { useCourier, CourierInbox } from "@trycourier/courier-react";

export default function App() {
  const courier = useCourier();

  useEffect(() => {
    // Authenticate the user
    courier.shared.signIn({ userId, jwt });
  }, []);

  // Add the Inbox component
  return <CourierInbox />;
}

<html>
  <body>
    <!-- Add the Inbox component -->
    <courier-inbox id="inbox"></courier-inbox>

    <script type="module">
      import { Courier } from '@trycourier/courier-ui-inbox';

      // Authenticate the user
      Courier.shared.signIn({ userId, jwt });
    </script>
  </body>
</html>

<script setup lang="ts">
import { onMounted } from "vue";
import { CourierInbox, useCourier } from "@trycourier/courier-vue";

const courier = useCourier();

onMounted(() => {
  // Authenticate the user
  courier.shared.signIn({ userId, jwt });
});
</script>

<template>
  <!-- Add the Inbox component -->
  <CourierInbox />
</template>

import { AfterViewInit, Component, inject } from "@angular/core";
import { CourierInboxComponent, CourierService } from "@trycourier/courier-angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [CourierInboxComponent],
  template: `
    <!-- Add the Inbox component -->
    <courier-inbox></courier-inbox>
  `,
})
export class AppComponent implements AfterViewInit {
  private readonly courier = inject(CourierService);

  ngAfterViewInit(): void {
    // Authenticate the user
    this.courier.signIn({ userId, jwt });
  }
}

import Courier_iOS

// Authentication.swift
func signInCourierInbox() async {
  Task {
    // Authenticate the user
    await Courier.shared.signIn(
      userId: userId,
      accessToken: jwt
    )
  }
}

// ViewController.swift
class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    // Add the Inbox view
    view.addSubview(CourierInbox())
  }
}

// MainActivity.kt
class MainActivity : CourierActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    Courier.initialize(this)

    lifecycleScope.launch {
      // Authenticate the user
      Courier.shared.signIn(
        userId = userId,
        accessToken = jwt,
      )
    }
  }
}

// MyInboxActivity.kt
class MyInboxActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
      // Add the Inbox @Composable
      CourierInbox()
    }
  }
}

import 'package:courier_flutter/courier_flutter.dart';
import 'package:courier_flutter/ui/inbox/courier_inbox.dart';

class MyInbox extends StatefulWidget {
  const MyInbox({super.key});

  @override
  State<MyInbox> createState() => _MyInboxState();
}

class _MyInboxState extends State<MyInbox> {
  @override initState() {
    // Authenticate the user
    await Courier.shared.signIn(
      accessToken: token,
      userId: userId
    )
  }

  @override
  Widget build(BuildContext context) {
    // Add the inbox widget
    return Scaffold(body: CourierInbox())
  }
}

import { Courier, CourierInboxView } from "@trycourier/courier-react-native";

const MyInbox = () => {
  useEffect(() => {
    // Authenticate the user
    await Courier.shared.signIn({
      accessToken: jwt,
      userId: userId,
    });
  });

  // Add the Inbox component
  return <CourierInboxView />
}

Choose your SDK

Integrate the SDK for your platform below. Not using a framework? The JavaScript SDK works on any page.

React

React 17 and 18+

JavaScript

Web Components for any framework, or none

Vue

Vue 3.3+

Angular

Angular 17+

React Native

Expo and RN

Flutter

iOS and Android

iOS

Swift and SwiftUI

Android

Kotlin and Compose

A modern UI that’s completely customizable

Courier Inbox SDKs ship a clean, modern notification center out of the box. Theme it to match your brand, or supply your own views and components for complete control while keeping the SDK’s built-in message management. Need to go further? The SDKs expose low-level, headless APIs you can build a fully custom experience on.

Real-time and synced across devices

Messages arrive in real time on web and mobile, and every state change (read, opened, archived) syncs instantly across every device where a user is signed in. Your users see the same inbox everywhere.

Notification-center essentials, built in

Unread counts and badges, read and archive actions, message-level buttons, pagination, and infinite scroll all work out of the box, so you’re embedding an inbox, not rebuilding one from scratch.

FAQ

Which frameworks and platforms does Inbox support?

Inbox SDKs are available for React, Vue, Angular, Web Components, React Native, Flutter, iOS, and Android. Web Components work with any JavaScript framework, including Svelte, or no framework at all.

Can I customize the inbox appearance?

Yes. All Inbox SDKs support theming to match your brand colors and typography. You can also supply your own components for complete control over rendering while still using the SDK’s message management, including read state, pagination, and real-time updates. See the SDK docs for your platform for theming and custom renderer options.

How does read state and syncing work?

Message states, including read, opened, and archived, are synced in real time across all devices where a user is signed in. If a user reads a notification on mobile, it updates on web immediately. When cross-channel syncing is enabled, opening an email notification also marks the corresponding Inbox message as read.

How do I authenticate users for Inbox?

Inbox requires a JWT token generated by your backend using your Courier API key. Your backend creates the token with the user’s ID, then passes it to the client SDK via signIn({ userId, jwt }). See Inbox Authentication for implementation details.

Can I send to Inbox and other channels at the same time?

Yes. Add inbox alongside other channels, including email, push, and SMS, in your message’s routing configuration. Courier delivers to each channel according to your channel priority rules. When cross-channel syncing is enabled, interactions on one channel, like opening an email, update the Inbox message state automatically.

Platform

Developer Tools

Help

Get Started with Courier Inbox

Choose your SDK

React

JavaScript

Vue

Angular

React Native

Flutter

iOS

Android

A modern UI that’s completely customizable

Real-time and synced across devices

Notification-center essentials, built in

FAQ

Next Steps

Setup Authentication

Send a Message

​Choose your SDK

React

JavaScript

Vue

Angular

React Native

Flutter

iOS

Android

​A modern UI that’s completely customizable

​Real-time and synced across devices

​Notification-center essentials, built in

​FAQ

​Next Steps

Setup Authentication

Send a Message

Choose your SDK

A modern UI that’s completely customizable

Real-time and synced across devices

Notification-center essentials, built in

FAQ

Next Steps