Sign in

Quickstart - Get started with sending custom notifications with Web Push using Liveblocks and Next.js

Liveblocks is a realtime collaboration infrastructure for building performant collaborative experiences. Follow this guide to send custom notifications with Web Push using methods from @liveblocks/node.

Quickstart

  1. Install Liveblocks Node

    Every Liveblocks package should use the same version.

    Terminal
    npm install @liveblocks/node

  2. Trigger a custom notification

    Trigger a custom notification using triggerInboxNotification from a server action or route handler. In this example, a custom $fileUploaded notification is sent.

    "use server";
    import { Liveblocks } from "@liveblocks/node";
    const liveblocks = new Liveblocks({  secret: "",});
    // Call this in your app to create a custom notificationexport async function triggerCustomNotification() {  await liveblocks.triggerInboxNotification({    // The user that will receive the notification    userId: "steven@example.com",    kind: "$fileUploaded",    subjectId: "my-file",
        // Custom data for this notification    activityData: {      file: "https://example.com/my-file.zip",      status: "pending",    },  });}

  3. Follow our guide

    Follow our step-by-step guide to learn set up Web Push notifications.

    How to notify users with Web Push

What to read next

Congratulations! You've set up Web Push notifications in your Next.js application.

Examples using Notifications