> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makershq.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Notify visitors about website updates

> Offer to refresh a React website when a new deployment is ready.

Use `WebsiteUpdates` in a React 19 website where you control the build and can serve a small JSON manifest. You need the [public project ID](https://docs.makershq.dev/integrations/release-notes.md) and a different build ID for each deployment.

## 1. Mount the notification

Install `@makershq/react@0.3.1` and render this component once beside your app. Replace the project ID and compile the build values into the running bundle. For React Server Components, use a client component.

```tsx theme={null}
import { WebsiteUpdates } from '@makershq/react'
import '@makershq/react/styles.css'

export function DeploymentNotice() {
  return (
    <WebsiteUpdates
      projectId="YOUR_PROJECT_ID"
      currentBuild={{ buildId: 'build-101', releaseVersion: '1.2.3' }}
    />
  )
}
```

## Publish a deployment manifest

**2. Deploy the next build.** Compile `build-102` and `1.2.4` into its bundle. After the matching assets are available, publish this `/version.json` on the same website with `Cache-Control: no-store`.

```json theme={null}
{ "buildId": "build-102", "releaseVersion": "1.2.4" }
```

An open tab running `build-101` can now detect the new deployment. Each bundle must keep its own build ID. Reading the running build ID from the manifest would make old tabs look current.

## Save safely before refresh

**3. Protect pending edits.** If visitors can edit documents or forms, pass your app’s save function as `beforeRefresh`. The SDK waits for it to finish. Reject the promise if work cannot be saved so the visitor can retry without losing the current page.

```tsx theme={null}
<WebsiteUpdates projectId={projectId} currentBuild={currentBuild} beforeRefresh={savePendingWork} />
```

## Show what changed after loading

**4. Verify with two builds.** Leave a tab open on the first build, deploy the second, and return to the tab. The SDK checks on focus after its throttle interval, on reconnect, and every five minutes while visible. Choose **Refresh**. If you published a note with the exact **App version** `1.2.4`, the updated page can show it after loading. First visits establish a baseline silently.

![Website update notification with Refresh and Not now controls](https://mintcdn.com/makershq/hvqyCwZAdLTv4TkG/images/integrations/release-notes/website-update-notification.webp?fit=max\&auto=format\&n=hvqyCwZAdLTv4TkG\&q=85\&s=1272bc3fbca442e4e7f5d54d406c6dc4)

An optional website notification lets customers refresh when a new deployment is ready. Example content shown.

A different build ID can trigger a refresh even on a rollback. Automatic release previews require a newer semantic version and a fresh matching note. See the [SDK reference](https://docs.makershq.dev/integrations/release-notes/react-reference.md#websiteupdates-props) for options and [custom notifications](https://docs.makershq.dev/integrations/release-notes/react-reference.md#custom-website-notifications) for a hook-based example.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.