How to customize room names in inbox notifications

When using inbox notifications with Comments, you’ll notice that room IDs are displayed by default (e.g., ”Chris mentioned you in room-abc123”). This isn’t ideal for users who need to see meaningful context. In this guide, you’ll learn how to replace room IDs with actual document or room names using resolveRoomsInfo.

Use resolveRoomsInfo to display custom names

You can provide a resolveRoomsInfo function to LiveblocksProvider that maps room IDs to human-readable names. This function receives an array of room IDs and should return an array of room info objects with a name property.

import { LiveblocksProvider } from "@liveblocks/react/suspense";
function App() {  return (    <LiveblocksProvider      resolveRoomsInfo={async ({ roomIds }) => {        // Fetch your documents or rooms from your database        const documentsData = await __getDocumentsFromDB__(roomIds);
        // Return room info with names        return documentsData.map((documentData) => ({          name: documentData.name,        }));      }}      // Other props      // ...    >      {/* children */}    </LiveblocksProvider>  );}

Once you’ve added this, the InboxNotification component will automatically use the room names instead of IDs, showing notifications like “Chris mentioned you in Document A” instead of “Chris mentioned you in room-abc123”.

Adding room URLs

You can also provide a url property for each room, which will be used by the InboxNotification component to make notifications clickable.

<LiveblocksProvider  resolveRoomsInfo={async ({ roomIds }) => {    const documentsData = await __getDocumentsFromDB__(roomIds);
    return documentsData.map((documentData) => ({      name: documentData.name,      url: documentData.url,    }));  }}  // Other props  // ...>  {/* children */}</LiveblocksProvider>

This is particularly useful when you need additional data from your backend to construct the URL, rather than building it directly in your React components using just the room ID.