Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/docs/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,10 @@ export default defineConfig({
label: "Self host Status Page only",
slug: "guides/self-host-status-page-only",
},
{
label: "How to translate your status page",
slug: "guides/how-to-translate-status-page",
},
],
},
{
Expand Down
68 changes: 68 additions & 0 deletions apps/docs/src/content/docs/guides/how-to-translate-status-page.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
title: How to translate your status page
description: Enable multiple languages on your status page and contribute new translations.
---

OpenStatus status pages support multiple languages. You can configure which locales are available per page and set a default language. Visitors can switch between languages using a built-in locale switcher.

## Supported locales

Currently supported languages:

| Code | Language |
|------|----------|
| `en` | English |
| `fr` | Fran\u00e7ais |
| `de` | Deutsch |

## Enable translations on your status page

1. Go to your **Dashboard** and open the status page settings.
2. Under **Locales**, select a **Default Locale** for your page.
3. Check **Enable locale switcher** to allow visitors to switch languages.
4. Select which languages you want to offer.
5. Click **Submit**.

When the locale switcher is enabled, visitors will see a language dropdown on your status page. The default locale is omitted from the URL for cleaner paths (e.g., `/status` instead of `/status/en`), while non-default locales are included (e.g., `/status/fr`).

## How routing works

OpenStatus supports two routing modes for locales:

- **Pathname routing** (subdomains like `status.openstatus.dev`): the locale appears after the slug, e.g., `/status/fr/events`.
- **Hostname routing** (custom domains like `status.example.com`): the locale is the first path segment, e.g., `/fr/events`.

In both cases, the default locale is omitted from the URL (`as-needed` prefix strategy).

## Contributing a new locale

Translations are open source. To add a new language:

### 1. Extend the locale registry

Add your locale to `packages/locales/index.ts`:

```ts
export const locales = ["en", "fr", "de", "es"] as const;
// ...
export const localeDetails: Record<Locale, { name: string; flag: string }> = {
en: { name: "English", flag: "\ud83c\uddfa\ud83c\uddf8" },
fr: { name: "Fran\u00e7ais", flag: "\ud83c\uddeb\ud83c\uddf7" },
de: { name: "Deutsch", flag: "\ud83c\udde9\ud83c\uddea" },
es: { name: "Espa\u00f1ol", flag: "\ud83c\uddea\ud83c\uddf8" },
};
```

### 2. Generate the translation file

Run the status page dev server:

```bash
pnpm dev:status-page
```

The `next-intl` extraction plugin will automatically create a new `apps/status-page/messages/<locale>.json` file with all translation keys pre-populated from the source locale. You can then fill in the translations.

### 3. Submit a pull request

Once your translations are complete, submit a PR to the [OpenStatus repository](https://github.com/openstatusHQ/openstatus). The locale will become available to all status pages after the next deployment.
18 changes: 18 additions & 0 deletions apps/docs/src/content/docs/reference/status-page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ A status page is a dedicated web interface provided by OpenStatus that publicly
- Incident communication and history.
- Customizable branding and domain.
- Multiple access control options.
- Multi-language support with a locale switcher.

## Configuration

Expand Down Expand Up @@ -84,6 +85,22 @@ ssh [slug]@ssh.openstatus.dev

**Example:** `ssh my-service@ssh.openstatus.dev`

### Translations (i18n)

**Type:** Per-page configuration

Enables multi-language support for your status page. You can set a default locale and optionally enable a locale switcher so visitors can choose their preferred language.

**Supported locales:** `en` (English), `fr` (Français), `de` (Deutsch)

**Configuration:**
- **Default Locale** — the fallback language for your status page (defaults to `en`).
- **Locale Switcher** — when enabled, visitors see a language dropdown. You select which locales to offer.

**Routing:** The default locale is omitted from the URL (`as-needed` prefix). Non-default locales appear in the path (e.g., `/fr/events`).

See [How to translate your status page](/guides/how-to-translate-status-page) for setup instructions and contributing new translations.

### White Label

**Type:** Boolean (add-on feature)
Expand All @@ -95,3 +112,4 @@ Removes the "powered by openstatus.dev" footer from your status page, providing
- **[Create Status Page](/tutorial/how-to-create-status-page)** - Step-by-step tutorial on creating a status page.
- **[How to Configure Status Page](/tutorial/how-to-configure-status-page)** - Guide on advanced status page configuration.
- **[Status Report Reference](/reference/status-report)** - Details on how incident statuses are managed and reported.
- **[How to Translate Your Status Page](/guides/how-to-translate-status-page)** - Enable multiple languages and contribute translations.
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ By the end of this tutorial, you'll have:
- A customized status page with your preferred theme
- Configured status trackers displaying data your way
- Links to important resources
- Multi-language support with a locale switcher
- Preview and live configuration experience

## Status Page Customization
Expand Down Expand Up @@ -123,6 +124,18 @@ Let's have a closer look at your status page header navigation:

---

### 4. Locales

You can offer your status page in multiple languages. In the **Locales** section of your status page settings:

1. Choose a **Default Locale** — the fallback language for visitors.
2. Enable the **Locale Switcher** to let visitors pick their preferred language.
3. Select which languages to make available.

Currently supported: English, French, and German. See [How to translate your status page](/guides/how-to-translate-status-page) for details on contributing new translations.

---

We are continuously adding new features. Feel free to let us know what's missing!

## What you've accomplished
Expand All @@ -132,6 +145,7 @@ Excellent work! You've successfully:
- ✅ Customized status tracker display options
- ✅ Explored and applied theme settings
- ✅ Added navigation links to your status page
- ✅ Configured locales and the language switcher
- ✅ Previewed changes before making them live

## What's next?
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions apps/web/src/content/pages/changelog/status-page-i18n.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
title: "Status Page i18n"
description: "Translate your status page into multiple languages and let visitors switch between them."
publishedAt: "2026-03-22"
image: "/assets/changelog/status-page-i18n.png"
category: "statuspage"
author: "openstatus"
---

Status pages now support multiple languages out of the box. Configure which locales are available and set a default language for your page — visitors can switch between them with a built-in locale switcher.

- **Multi-language support** - enable English, French, and German translations for your status page
- **Per-page configuration** - choose which languages to offer and set the default locale from the dashboard
- **Locale switcher** - visitors can switch languages directly on the status page, works with both subdomain and pathname routing
- **Locale-aware routing** - the default locale is omitted from the URL for cleaner paths, non-default locales are included automatically

Big props to [@aggmoulik](https://github.com/aggmoulik) who initiated the feature.
6 changes: 6 additions & 0 deletions apps/web/src/content/pages/product/status-page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ faq:
answer: "Use public status pages for customer-facing services where transparency builds trust. Use private status pages (password-protected or magic link) for internal tools, client-specific deployments, or when you need to control who receives status updates."
- question: "What's the difference between monitors and external services in page components?"
answer: "Monitors are automatically synced with your OpenStatus uptime monitoring data and update in real-time. External services are manually managed components for third-party dependencies or systems you don't directly monitor but want to report status for."
- question: "Can I translate my status page into other languages?"
answer: "Yes, status pages support multiple languages (currently English, French, and German). You can set a default locale and enable a locale switcher so visitors choose their preferred language. Translations are open source — you can contribute new languages by adding a locale to the shared registry and running the dev server to generate the translation file."
- question: "Can I use my own domain for the status page?"
answer: "Yes, you can configure custom domains to host your status page on your own domain (e.g., status.yourcompany.com) instead of the default OpenStatus subdomain. This keeps the experience consistent with your brand."
- question: "How do status page subscriptions work?"
Expand Down Expand Up @@ -84,6 +86,10 @@ We support following communication channels:

[Contact us](mailto:ping@openstatus.dev) if you are looking for specific a channel.

### Translations

Offer your status page in **multiple languages**. Set a default locale and enable a **locale switcher** so visitors can read updates in their preferred language. Currently supports English, French, and German — with more languages coming from community contributions.

### Audience

By default, your status page is public. For internal or client-specific pages, you can protect access using **password protection** or **magic link** authentication to control who can view your updates.
Expand Down
Loading