This October, we made improvements webhooks and our dashboard analytics.

- [Webhook updates](#webhook-updates): Add custom headers and debug events more
  easily.
- [Dashboard analytics](#dashboard-analytics): Clearer usage numbers by time
  period and project.
- [Messaging app example](#messaging-app-example): Build a Slack-like chat with
  AI & human teammates.

## Upgrade now [#upgrade-now]

To use the latest features, update your packages with the following command.

```bash
npx liveblocks upgrade
```

If you were previously on Liveblocks 3.17 or below, make sure to follow our
[upgrade guides](/docs/platform/upgrading) before updating.

## Webhook updates [#webhook-updates]

We’ve updated a number of features around webhooks in the dashboard. Add headers
your receiver expects, send example events to a Liveblocks-hosted test endpoint,
and inspect exactly what was delivered.

### Custom headers

If your webhook receiver sits behind an API gateway or expects an API key, you
can now add custom HTTP headers when creating or editing an endpoint in the
dashboard. Previously, custom headers could only be set with the
[Management API](/docs/platform/management-api). Each endpoint supports up to
five custom headers, sent with every webhook request.

<Figure caption={<></>}>
  <MuxVideo
    playbackId="ox9diZcCyL00hpxEW4s5HSkpSvIrWjXzi64q3syP1RYI"
    alt="Webhook custom headers"
    static={true}
  />
</Figure>

### Test endpoint

You can now send example events to a Liveblocks-hosted test endpoint. This makes
it easier to test your webhook receiver without having to deploy your own
server. Events will be delivered to the test endpoint instead of your
application, and you can inspect the response body to see exactly what was
delivered.

<Figure caption={<></>}>
  <MuxVideo
    playbackId="ApHLsNj3IXfgSevfR9cZxOKS5T02EWBqLptIcCM4mz68"
    alt="Webhook test endpoint"
    static={true}
  />
</Figure>

### Easier debugging

We’ve also refined the webhook event details view. You can resend an event from
the event itself, open any attempt to view its response body, and copy the
message ID.

<Figure caption={<></>}>
  <MuxVideo
    playbackId="EH92GlLUg5d9dz8is9zKd00wScU7twSL01ZhIJ01yBj02Pc"
    alt="Webhook info"
    static={true}
  />
</Figure>

### Update your IP whitelist

Webhooks are no longer sent from a fixed set of IP addresses. If your endpoint
only accepts traffic from our previously published IP addresses, update your
firewall to allow any IP address, and use
[signature verification](/docs/platform/webhooks#security-verification) to
confirm requests come from Liveblocks.

### Coming soon

All the work above is part of our project to create our own webhook delivery
engine, rather than relying on a third-party service. Webhooks will continue
working seamlessly for you, with no code changes required on your end. Stay
tuned for more details!

## Dashboard analytics [#dashboard-analytics]

It’s now easier to understand your project’s activity in the dashboard. When you
select a period on a project’s overview, each card updates to match it, and the
subtitle explains how it was calculated. Comments, notifications, and
connections show the total for the period, active users and rooms show the
latest day, week, or month, and peak connections show the highest value.

<Figure caption={<></>}>
  <MuxVideo
    playbackId="GpUN3rN7U5MECSIUYnU6rS2jwSEFACCgXyar00mMWhHg"
    alt="Updated dashboard"
    static={true}
  />
</Figure>

To dig deeper, click “View usage” on a project’s overview to open the usage page
for that project, keeping the same period and interval. The active users and
peak connections tooltips now describe what each metric measures, and the header
shows your team and project, making it easier to switch back to all projects.

## Messaging app example [#messaging-app-example]

We’ve added a new example showing how to build a Slack-like messaging app with
[Feeds](/docs/products/sync/feeds), Storage, and Presence—no database needed, as
Liveblocks stores everything. Each workspace is a room, with channels kept in
Storage, and each channel’s messages and direct messages stored in feeds.

<Figure
  caption={
    <>
      Our{" "}
      <Link href="/examples/messaging-app/nextjs-messaging-app">
        Messaging App
      </Link>{" "}
      example
    </>
  }
>
    <MuxVideo 
      playbackId="eDhdovwlhKqvL0059LXw7IulU4D3mQ9zAcdRIBr94ktA"
      alt="Messaging app example"
      static={true}
    />

</Figure>

Messages support rich text and @-mentions, and mentioning the AI teammate
streams a reply into a thread. Each user also has a personal activity feed that
powers unread badges for direct messages, mentions, and thread replies.

<ButtonLink href="/examples/messaging-app/nextjs-messaging-app" size="lg">
  Try the example
</ButtonLink>

## Minor improvements [#minor-improvements]

- Fixed unread inbox notification counts not updating when receiving replies in
  connected rooms in `@liveblocks/react`.
- Fixed unread inbox notification counts not updating immediately when marking a
  thread as read in `@liveblocks/react`.
- Fixed `LiveText` reconnect convergence with pending edits in
  `@liveblocks/client`, including lost acknowledgements, repeated reconnects,
  and queued edits.
- Webhook messages waiting to be delivered now show as “Scheduled” instead of
  “Pending” in the dashboard.
- Documented the limits for webhook custom headers and rate limits in the
  [Management API](/docs/platform/management-api) reference.
- New customer story:
  [Why Windmill builds everything multiplayer](/blog/why-windmill-builds-everything-multiplayer).

### Upgrade

To use these latest features, update your packages with:

```bash
npx liveblocks upgrade
```

## Contributors [#contributors]

<Contributors
  gitHubUsernames={[
    "ctnicholas",
    "jrowny",
    "marcbouchenoire",
    "nvie",
    "pierrelevaillant",
  ]}
/>