Feat/docs (#2)

* Added english docs * Added german translations * Added community overview * Added community overview --------- Co-authored-by: Karl Ludwig Weise <ludwig@ludwigweise.de>
2026-08-17 21:25:43 +02:00 · 2026-03-24 20:08:47 +01:00
parent 0f52262316
commit f65826359e
362 changed files with 3566 additions and 31 deletions
@@ -4,20 +4,25 @@ import starlight from "@astrojs/starlight";
 import tailwindcss from "@tailwindcss/vite";
 import starlightThemeNova from "starlight-theme-nova";
 import starlightGitHubAlerts from "starlight-github-alerts";
+import starlightHeadingBadges from "starlight-heading-badges";

 // https://astro.build/config
 export default defineConfig({
  site: "https://open-reception.org",
-  i18n: {
-    locales: ["en", "de"],
-    defaultLocale: "en",
-  },
  prefetch: true,
  integrations: [
    starlight({
-      plugins: [starlightThemeNova(), starlightGitHubAlerts()],
+      plugins: [
+        starlightThemeNova(),
+        starlightGitHubAlerts(),
+        starlightHeadingBadges(),
+      ],
      title: "OpenReception",
-      defaultLocale: "en",
+      defaultLocale: "root",
+      locales: {
+        root: {label: "English", lang: "en"},
+        de: {label: "Deutsch", lang: "de"},
+      },
      customCss: ["./src/styles/custom.css"],
      logo: {
        src: "./src/assets/open-reception-logo.svg",
@@ -54,6 +59,77 @@ export default defineConfig({
        },
      ],
      sidebar: [
+        {
+          label: "Getting Started",
+          autogenerate: {directory: "getting-started"},
+          translations: {
+            de: "Loslegen",
+          },
+        },
+        {
+          label: "Tenants",
+          collapsed: true,
+          autogenerate: {directory: "tenants"},
+          translations: {
+            de: "Mandanten",
+          },
+        },
+        {
+          label: "Agents & Absences",
+          collapsed: true,
+          autogenerate: {directory: "agents"},
+          translations: {
+            de: "Akteure & Abwesenheiten",
+          },
+        },
+        {
+          label: "Channels",
+          collapsed: true,
+          autogenerate: {directory: "channels"},
+          translations: {
+            de: "Kanäle",
+          },
+        },
+        {
+          label: "Calendar",
+          collapsed: true,
+          autogenerate: {directory: "calendar"},
+          translations: {
+            de: "Kalender",
+          },
+        },
+        {
+          label: "Staff & Notifications",
+          collapsed: true,
+          autogenerate: {directory: "staff"},
+          translations: {
+            de: "Personal & Benachrichtigungen",
+          },
+        },
+        {
+          label: "Settings",
+          collapsed: true,
+          autogenerate: {directory: "settings"},
+          translations: {
+            de: "Einstellungen",
+          },
+        },
+        {
+          label: "Account",
+          collapsed: true,
+          autogenerate: {directory: "account"},
+          translations: {
+            de: "Konto",
+          },
+        },
+        {
+          label: "Client Side",
+          collapsed: true,
+          autogenerate: {directory: "client-side"},
+          translations: {
+            de: "Klientenfunktionen",
+          },
+        },
        {
          label: "Community",
          autogenerate: {directory: "community"},
@@ -15,6 +15,7 @@
    "astro": "^5.16.6",
    "sharp": "^0.34.5",
    "starlight-github-alerts": "^0.1.1",
+    "starlight-heading-badges": "^0.6.1",
    "starlight-theme-nova": "^0.10.0",
    "tailwindcss": "^4.1.18"
  }
@@ -23,6 +23,9 @@ importers:
      starlight-github-alerts:
        specifier: ^0.1.1
        version: 0.1.1(@astrojs/starlight@0.37.1(astro@5.16.6(@types/node@22.15.21)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.41.0)(typescript@5.8.3)(yaml@2.8.0)))
+      starlight-heading-badges:
+        specifier: ^0.6.1
+        version: 0.6.1(@astrojs/starlight@0.37.1(astro@5.16.6(@types/node@22.15.21)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.41.0)(typescript@5.8.3)(yaml@2.8.0)))
      starlight-theme-nova:
        specifier: ^0.10.0
        version: 0.10.0(@astrojs/starlight@0.37.1(astro@5.16.6(@types/node@22.15.21)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.41.0)(typescript@5.8.3)(yaml@2.8.0)))(typescript@5.8.3)
@@ -1897,6 +1900,12 @@ packages:
    peerDependencies:
      '@astrojs/starlight': '>=0.35.0'

+  starlight-heading-badges@0.6.1:
+    resolution: {integrity: sha512-k89LlfxWSI136QOaedf70cZ29oDfv5xb6C2TIipt0RTk6TltVvUwFKk2H7gd+bVAjpH18CmzlGhCa5moEtyeZA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@astrojs/starlight': '>=0.32.0'
+
  starlight-theme-nova@0.10.0:
    resolution: {integrity: sha512-V9Amhr5eH9XA3xC5gGpVCSjkkFYcsG4K/F5itYldC6tEPguPwKZyOaUg3u4Pzj05w8xif8rA+bR5Te/BBz4UJA==}
    peerDependencies:
@@ -4730,6 +4739,16 @@ snapshots:
      '@astrojs/starlight': 0.37.1(astro@5.16.6(@types/node@22.15.21)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.41.0)(typescript@5.8.3)(yaml@2.8.0))
      unist-util-visit: 5.0.0

+  starlight-heading-badges@0.6.1(@astrojs/starlight@0.37.1(astro@5.16.6(@types/node@22.15.21)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.41.0)(typescript@5.8.3)(yaml@2.8.0))):
+    dependencies:
+      '@astrojs/markdown-remark': 6.3.10
+      '@astrojs/starlight': 0.37.1(astro@5.16.6(@types/node@22.15.21)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.41.0)(typescript@5.8.3)(yaml@2.8.0))
+      github-slugger: 2.0.0
+      mdast-util-directive: 3.1.0
+      unist-util-visit: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+
  starlight-theme-nova@0.10.0(@astrojs/starlight@0.37.1(astro@5.16.6(@types/node@22.15.21)(jiti@2.6.1)(lightningcss@1.30.2)(rollup@4.41.0)(typescript@5.8.3)(yaml@2.8.0)))(typescript@5.8.3):
    dependencies:
      '@aria-ui/core': 0.0.22
@@ -0,0 +1,14 @@
+---
+import {getLangFromUrl, useTranslations} from "../i18n/utils";
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<a
+  class="nova-link-button not-content nova-link-button-primary"
+  style="margin-left: auto; font-size: 0.75rem; padding: 0.25rem .5rem; border-radius: 0.5rem;"
+  href={lang === "de" ? "/de/getting-started" : "/getting-started"}
+>
+  {t("header.getStsarted")}
+</a>
@@ -1,7 +1,8 @@
-import { defineCollection } from 'astro:content';
-import { docsLoader } from '@astrojs/starlight/loaders';
-import { docsSchema } from '@astrojs/starlight/schema';
+import {defineCollection} from "astro:content";
+import {docsLoader} from "@astrojs/starlight/loaders";
+import {docsSchema, i18nSchema} from "@astrojs/starlight/schema";

 export const collections = {
-	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+  docs: defineCollection({loader: docsLoader(), schema: docsSchema()}),
+  i18n: defineCollection({type: "data", schema: i18nSchema()}),
 };
@@ -0,0 +1,8 @@
+---
+title: Account Settings
+description: tbd
+lastUpdated: 2026-03-01
+draft: true
+sidebar:
+  order: 10
+---
@@ -0,0 +1,8 @@
+---
+title: Change Account E-Mail
+description: tbd
+lastUpdated: 2026-03-01
+draft: true
+sidebar:
+  order: 10
+---
@@ -0,0 +1,8 @@
+---
+title: Change Global Admin Passphrase
+description: tbd
+lastUpdated: 2026-03-01
+draft: true
+sidebar:
+  order: 10
+---
@@ -0,0 +1,30 @@
+---
+title: Account Overview
+description: This sections helps you get set up and navigate the OpenReception dashboard.
+lastUpdated: 2026-03-01
+sidebar:
+  order: 1
+---
+
+import {CardGrid} from "@astrojs/starlight/components";
+import {LinkCard} from "@astrojs/starlight/components";
+
+This sections helps you get set up and navigate the OpenReception dashboard.
+
+<CardGrid>
+  <LinkCard
+    title="Setup Account"
+    href="./setup-account"
+    description="From invitation e-mail to being ready for work"
+  />
+  <LinkCard
+    title="Login"
+    href="./login"
+    description="Logging into your account, when already set up"
+  />
+  <LinkCard
+    title="User Inface Tips"
+    href="./user-interface-tips"
+    description="Little tips that may help you along the way"
+  />
+</CardGrid>
@@ -0,0 +1,37 @@
+---
+title: Login
+description: This step-by-step guide shows you how to login into the OpenReception dashboard.
+lastUpdated: 2026-03-01
+sidebar:
+  order: 3
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+This step-by-step guide shows you how to login into the OpenReception dashboard.
+
+:::note
+This is not the [client login](/client-side/client-dashboard)
+:::
+
+<Steps>
+
+1. Go to your organizations appointment booking page. Click _Login_ in the top left corner.
+
+   ![Appointment Booking Organitation Home](./assets/login/1-home.png)
+
+1. You've been forwarded to the client login. Click _I am a staff member here_.
+
+   ![Client Login](./assets/login/2-client-login.png)
+
+1. Now you are on the dashboard login page.
+
+   ![Dashboard Login](./assets/login/3-dashboard-login.png)
+
+1. Enter your **e-mail address**
+
+1. _Click/Tap to add passkey_ and follow the instructions in the system overlay to enter your passkey.
+
+1. Once this is done, we will automatically try to login you in. If successfull, you are now forwarded to the dashboard.
+
+</Steps>
@@ -0,0 +1,8 @@
+---
+title: Manage Passkeys
+description: tbd
+lastUpdated: 2026-03-01
+draft: true
+sidebar:
+  order: 10
+---
@@ -0,0 +1,67 @@
+---
+title: Setup Account
+description: This step-by-step guide shows you how to setup your OpenReception account, if you have been invited to an organization.
+lastUpdated: 2026-03-01
+sidebar:
+  order: 2
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+This step-by-step guide shows you how to setup your OpenReception account, if you have been invited to an organization.
+
+:::note
+This guide requires you to have been [invited by another team member](/staff/add-staff-member) beforehand.
+:::
+
+:::caution
+You will need your [PRT Passkey](/getting-started/#passkeys) at hand for this to work.
+:::
+
+<Steps>
+
+1. You will have an e-mail with an invitiation in your inbox. Click on the link provided in that e-mail.
+
+1. You may see an e-mail confirmation success screen.
+
+   ![E-Mail confirmed](./assets/setup-account/1-email-confirmed.png)
+
+   If your invitiation expired, you will see a _Verification failed_ message. You can request a new invitation link on that same page by clicking _Request new E-Mail_.
+
+   ![E-Mail verification failed](./assets/setup-account/1b-verification-failed.png)
+
+1. When you've confirmed your e-mail address, click _Setup Passkey_.
+
+1. You will be forwarded to a form where you can add you passkey by clicking _Click/Tap to add passkey_.
+
+   ![Setup passkey form](./assets/setup-account/2-setup-passkey.png)
+
+1. Depending on your Passkey you will now see a system overlay that guides you through setting up your passkey for this organization. Follow the instructions.
+
+   For **Software Passkeys** this usually includes biometric approval.
+
+   For **Hardware Passkeys** this usually includes touching the contact area of a passkey (usually a metal surface) and entering a Passphrase/ PIN.
+
+   If this is the first time you are using that passkey, you may also have to set a PIN/Passphrase. **Use a strong and long passphrase!**
+
+1. Once you've set the passkey, we need to retrieve additional data to decrypt appointments. You will see a confirm dialog:
+
+   ```
+   Now use your newly created passkey to enable encryption with it.
+   ```
+
+   Click _Ok_.
+
+1. You will be asked to verify the use of your passkey, which is similar to the process described above.
+
+1. Once this process is done, you will see a message _Added Passkey successfully_ in the **passkey** field. Now click _Set Passkey_
+
+   ![Passkey added successfully](./assets/setup-account/3-setup-passkey-successful.png)
+
+1. You will now see two success notifications and the login form.
+
+   ![Account setup completed](./assets/setup-account/4-account-successfully-set-up.png)
+
+</Steps>
+
+Your account is now set up. Your team members may still need to [grant you access to previous appointments](/staff/grant-access-to-staff-member).
@@ -0,0 +1,31 @@
+---
+title: User Interface Tips
+description: This page shows some tips for working with the OpenReception dashboard
+lastUpdated: 2026-03-01
+sidebar:
+  order: 4
+---
+
+This page shows some tips for working with the OpenReception dashboard
+
+## Dashboard Overview
+
+The dashboard gives you access to all appointments and settings.
+
+You can toggle the navigation sidebar large and small by clicking its border or the sidebar icon in the top left corner of the main area.
+
+![Dashboard Overview](./assets/user-interface/1-dashboard-overview.png)
+
+## Account Menu
+
+You can access your personal account settings using the account menu.
+
+This is also the place where you can safely logout.
+
+![Account Menu](./assets/user-interface/2-account-menu.png)
+
+## Tenant Switch
+
+Global Admins can make use of the tenant switch in the top left corner. This makes switching tenants quick.
+
+![Tenant Switch](./assets/user-interface/3-tenant-switch.png)
@@ -0,0 +1,27 @@
+---
+title: Add Absence
+description: This step-by-step guide shows you how to add an absence for an OpenReception agent
+lastUpdated: 2026-03-01
+sidebar:
+  order: 5
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+<Steps>
+
+1. Navigate to the absences section of the dashboard and click on _Add Absence_
+
+   ![Empty absence list](./assets/add-absence/1-empty-absences-list.png)
+
+1. A modal with a form opens.
+   - Select the absent **agent**
+   - Change the **reason**, if you want to track it here.
+   - Select a range for the absence. The **to date** must be in the future.
+
+   ![Add absence form](./assets/add-absence/2-add-absence-form.png)
+
+1. Click _Add Absence_ and it will be saved.
+   ![Add tenant form](./assets/add-absence/3-absence-added.png)
+
+</Steps>
@@ -0,0 +1,35 @@
+---
+title: Add Agent
+description: This step-by-step guide shows you how to add an agent to OpenReception
+lastUpdated: 2026-03-01
+sidebar:
+  order: 2
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+:::note
+Before you add an agent, make sure you've [set up all the tenant languages](../../settings/base-settings).
+:::
+
+<Steps>
+
+1. Navigate to the agents section of the dashboard and click on _Add Agent_
+
+   ![Empty agent list](./assets/add-agent/1-empty-agent-list.png)
+
+1. A modal with a form opens.
+   - Add a **name**
+   - Add a **description**, if you want. If you've set it for one language, you'll have to set it for all languages.
+   - Click _Upload Image_ to add an image for this agent.
+
+   ![Add agent form](./assets/add-agent/2-add-agent-form.png)
+
+1. If you've uploaded an image, you can crop it right within OpenReception. Click _Apply_, when you're happy with your selection.
+
+   ![Add tenant form](./assets/add-agent/3-cropping-an-agent-image.png)
+
+1. Then click _Add Agent_ and it will be saved.
+   ![Add tenant form](./assets/add-agent/4-agent-added.png)
+
+</Steps>
@@ -0,0 +1,25 @@
+---
+title: Delete Absence
+description: This step-by-step guide shows you how to delete an absence for an OpenReception agent
+lastUpdated: 2026-03-01
+sidebar:
+  order: 7
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+<Steps>
+
+1. Navigate to the absences section of the dashboard, search for the absence you want to delete and open the context menu for it. Click on _Delete_.
+
+   ![Empty absences list](./assets/delete-absence/1-absences-list-with-context-menu.png)
+
+1. A modal opens. Click _Delete Absence_
+
+   ![Delete absence form](./assets/delete-absence/2-delete-absence-form.png)
+
+1. The absence will be removed.
+
+   ![Absence deleted](./assets/delete-absence/3-absence-deleted.png)
+
+</Steps>
@@ -0,0 +1,25 @@
+---
+title: Delete Agent
+description: This step-by-step guide shows you how to remove an agent from OpenReception
+lastUpdated: 2026-03-01
+sidebar:
+  order: 4
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+<Steps>
+
+1. Navigate to the agents section of the dashboard, search for the agent you want to delete and open the context menu for it. Click on _Delete_.
+
+   ![Agent list with context menu](./assets/delete-agent/1-agent-list-with-context-menu.png)
+
+1. A modal with a form opens. Enter the name of the agent and click _Delete Agent_
+
+   ![Delete agent form](./assets/delete-agent/2-delete-agent-form.png)
+
+1. The agent will be removed.
+
+   ![Agent deleted](./assets/delete-agent/3-agent-deleted.png)
+
+</Steps>
@@ -0,0 +1,32 @@
+---
+title: Edit Absence
+description: This step-by-step guide shows you how to edit an absence for an OpenReception agent
+lastUpdated: 2026-03-01
+sidebar:
+  order: 6
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+:::note
+You cannot change the agent. You must remove the absence and create a new absence with the correct agent, in that case.
+:::
+
+<Steps>
+
+1. Navigate to the absences section of the dashboard, search for the absence you want to edit and open the context menu for it. Click on _Edit_.
+
+   ![Absences list](./assets/edit-absence/1-absences-list-with-context-menu.png)
+
+1. A modal with a form opens.
+   - Change the **reason**, if you want
+   - Change the date range, if you want
+   - Click _Edit Absence_ when you are finished.
+
+   ![Edit absence form](./assets/edit-absence/2-edit-absence-form.png)
+
+1. The absence will be updated.
+
+   ![Absence edited](./assets/edit-absence/3-absence-edited.png)
+
+</Steps>
@@ -0,0 +1,33 @@
+---
+title: Edit Agent
+description: This step-by-step guide shows you how to edit an agent in OpenReception
+lastUpdated: 2026-03-01
+sidebar:
+  order: 3
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+:::note
+If you use descriptions and have added languages since the last time you've edited an agent, you can only save your changes, if you add descriptions of all missing languages.
+:::
+
+<Steps>
+
+1. Navigate to the agents section of the dashboard, search for the agent you want to edit and open the context menu for it. Click on _Edit_.
+
+   ![Agent list](./assets/edit-agent/1-agent-list-with-context-menu.png)
+
+1. A modal with a form opens.
+   - Edit the **name**
+   - Edit **descriptions**, if you want.
+   - Edit the **image**, if you want.
+   - Click _Edit Agent_ when you are finished.
+
+   ![Edit agent form](./assets/edit-agent/2-edit-agent-form.png)
+
+1. The agent will be updated.
+
+   ![Agent edited](./assets/edit-agent/3-agent-edited.png)
+
+</Steps>
@@ -0,0 +1,58 @@
+---
+title: Agents & Absences Overview
+description: Agents are people/ groups/ teams that take your appointments. You can also add Absences for agents, for when they are not available.
+lastUpdated: 2026-03-01
+sidebar:
+  order: 1
+---
+
+import {CardGrid} from "@astrojs/starlight/components";
+import {LinkCard} from "@astrojs/starlight/components";
+
+**Agents** are the people/ groups/ teams that take your appointments. If you assign more agents to a channel, clients can choose which one to meet with.
+
+:::note
+Agents are not necessarily the same people who are accessing your appointments. Only [Staff Members](../staff) can access appointments.
+:::
+
+<CardGrid>
+  <LinkCard
+    title="Add Agent"
+    href="./add-agent"
+    description="Add a new agent to your instance"
+  />
+  <LinkCard
+    title="Edit Agent"
+    href="./edit-agent"
+    description="Changing an agents details"
+  />
+  <LinkCard
+    title="Delete Agent"
+    href="./delete-agent"
+    description="Removing an agent"
+  />
+</CardGrid>
+
+You can also add **Absences** for agents, to make sure nobody can book appointments with them, when they are not available.
+
+:::note
+Only future absences are shown and absences in the past are automatically removed.
+:::
+
+<CardGrid>
+  <LinkCard
+    title="Add Absence"
+    href="./add-absence"
+    description="Add a new absence for an agent"
+  />
+  <LinkCard
+    title="Edit Absence"
+    href="./edit-absence"
+    description="Changing an agents absence"
+  />
+  <LinkCard
+    title="Delete Absence"
+    href="./delete-absence"
+    description="Removing an absence"
+  />
+</CardGrid>
@@ -0,0 +1,94 @@
+---
+title: Add Appointments
+description: The OpenReception calendar let's you enter appointments for clients you already have in your database, add new clients and add appointments for clients without an e-mail address
+lastUpdated: 2026-03-01
+sidebar:
+  order: 2
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+In the calendar you can add appointments to any available slot.
+
+To identify clients OpenReception uses e-mail addresses. If you have the e-mail address of a client and add it to the appointment, the client will be informed about changes.
+
+But you can also add appointments for clients that don't have an e-mail address.
+
+## Add Appointment with E-Mail Address
+
+<Steps>
+
+1.  Navigate to the calendar section of the dashboard, go to the date and time you wish to add an appointment to and click on the empty slot.
+
+    ![Calendar Overview with empty slots](./assets/add-appointment-in-calendar/1-calendar-overview.png)
+
+1.  A modal will open. Enter the e-mail address of the client and click _Search Client_
+
+    ![Add E-Mail to Appointment](./assets/add-appointment-in-calendar/2-add-appointment-find-client.png)
+
+1.  If the client was found, you will see a notification that shows _Client selected_.
+
+    ![Client selected notification](./assets/add-appointment-in-calendar/3-add-appointment-details.png)
+
+    If not, you will be asked to confirm, if you want to add this client:
+
+    ```
+    This client does not have an account yet. Do you want to create an account for them?
+    ```
+
+    Click _Ok_ to add the client or _Cancel_ to try with another e-mail address.
+
+1.  Either way you will be asked to enter appointment details.
+    - Add a **name**
+    - Add a **phone number**, if you want
+    - Check the checkbox, if the client want's updates via e-mail
+    - Click _Add Client Details_
+
+    ![Appointment details form](./assets/add-appointment-in-calendar/3b-add-appointment-details.png)
+
+1.  Lastly you can review your appointment before creating it. Click _Add Appoitment_ to create it.
+
+    ![Appointment overview](./assets/add-appointment-in-calendar/4-add-appointment-overview.png)
+
+1.  You will see a success message, once the appointment was created. The modal stays open, so you can talk to you client about it.
+
+    ![Appointment added](./assets/add-appointment-in-calendar/5-appointment-added.png)
+
+    Once you close the modal, you will see the newly added appointment in the calendar.
+
+    ![Added appointment in calendar](./assets/add-appointment-in-calendar/6-appointment-added-calendar-overview.png)
+
+</Steps>
+
+## Add Appointment without E-Mail Address
+
+<Steps>
+
+1.  Navigate to the calendar section of the dashboard, go to the date and time you wish to add an appointment to and click on the empty slot.
+
+    ![Calendar Overview with empty slots](./assets/add-appointment-in-calendar-client-without-email/1-calendar-overview.png)
+
+1.  A modal will open. Click _Client has not e-mail_ to bypass the e-mail form.
+
+    ![Add appointment: Client has not e-mail button](./assets/add-appointment-in-calendar-client-without-email/2-add-appointment-client-has-no-email.png)
+
+1.  You will be asked to enter appointment details.
+    - Add a **name**
+    - Add a **phone number**, if you want
+    - Click _Add Client Details_
+
+    ![Appointment details form](./assets/add-appointment-in-calendar-client-without-email/3-add-appointment-details.png)
+
+1.  Lastly you can review your appointment before creating it. Click _Add Appoitment_ to create it.
+
+    ![Appointment overview](./assets/add-appointment-in-calendar-client-without-email/4-add-appointment-overview.png)
+
+1.  You will see a success message, once the appointment was created. The modal stays open, so you can talk to you client about it.
+
+    ![Appointment added](./assets/add-appointment-in-calendar-client-without-email/5-appointment-added.png)
+
+    Once you close the modal, you will see the newly added appointment in the calendar.
+
+    ![Added appointment in calendar](./assets/add-appointment-in-calendar-client-without-email/6-appointment-added-calendar-overview.png)
+
+</Steps>
@@ -0,0 +1,37 @@
+---
+title: Cancel Appointment
+description: This step-by-step guide shows you how to cancel an appointment in OpenReception
+lastUpdated: 2026-03-01
+sidebar:
+  order: 3
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+If there is a appointment in the calendar that you want to remove, you can **cancel** it.
+
+<Steps>
+
+1.  Navigate to the calendar section of the dashboard, go to the appointment you wish to cancel and click on it.
+
+    ![Calendar with appointments](./assets/calendar-cancel-appointment/1-calendar-with-appointments.png)
+
+1.  A modal with the appointment details opens. Click _Cancel Appointment_
+
+    ![Appointment details with cancel button](./assets/calendar-cancel-appointment/2-appointment-details-with-cancel-button.png)
+
+1.  A confirm dialog opens.
+
+    ```
+    Are you sure you want to cancel this appointment?
+    ```
+
+    Click _Ok_ to proceed.
+
+1.  The appointment is now removed. If the client had E-Mail notifications enabled, they wil be notified.
+
+    ![Appointment cancelled](./assets/calendar-cancel-appointment/3-appointment-cancelled.png)
+
+    Every staff member in the channel will be notified.
+
+</Steps>
@@ -0,0 +1,29 @@
+---
+title: Confirm Appointment
+description: This step-by-step guide shows you how to confirm an appointment request in OpenReception
+lastUpdated: 2026-03-01
+sidebar:
+  order: 4
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+If you've set a [channel to require confirmation](/channels#require-confirmation) before appointments are accepted, you have to confirm or [deny](/calendar/deny-appointment) them.
+
+<Steps>
+
+1.  Navigate to the calendar section of the dashboard, go to the appointment you wish to confirm and click on it.
+
+    ![Calendar with appointments](./assets/calendar-confirm-appointment/1-calendar-with-requested-appointment.png)
+
+1.  A modal with the appointment details opens. Click _Confirm Appointment_
+
+    ![Appointment details with confirm button](./assets/calendar-confirm-appointment/2-appointment-details-with-confirm-button.png)
+
+1.  The appointment is now confirmed. If the client had E-Mail notifications enabled, they wil be notified.
+
+    ![Appointment confirmed](./assets/calendar-confirm-appointment/3-appointment-confirmed.png)
+
+    Every staff member in the channel will be notified.
+
+</Steps>
@@ -0,0 +1,37 @@
+---
+title: Deny Appointment
+description: This step-by-step guide shows you how to deny an appointment request in OpenReception
+lastUpdated: 2026-03-01
+sidebar:
+  order: 4
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+If you've set a [channel to require confirmation](/channels#require-confirmation) before appointments are accepted, you have to [confirm](/calendar/confirm-appointment) or deny them.
+
+<Steps>
+
+1.  Navigate to the calendar section of the dashboard, go to the appointment you wish to deny and click on it.
+
+    ![Calendar with appointments](./assets/calendar-deny-appointment/1-calendar-with-requested-appointment.png)
+
+1.  A modal with the appointment details opens. Click _Deny Appointment_
+
+    ![Appointment details with deny button](./assets/calendar-deny-appointment/2-appointment-details-with-deny-button.png)
+
+1.  A confirm dialog opens.
+
+    ```
+    Are you sure you want to deny this appointment?
+    ```
+
+    Click _Ok_ to proceed.
+
+1.  The appointment is now denied and removed. If the client had e-mail notifications enabled, they wil be notified.
+
+    ![Appointment denied](./assets/calendar-deny-appointment/3-appointment-denied.png)
+
+    Every staff member in the channel will be notified.
+
+</Steps>
@@ -0,0 +1,57 @@
+---
+title: Calendar Overview
+description: The OpenReception calendar is optimized to show you all your appointments today and find available slots for future appointments
+lastUpdated: 2026-03-01
+sidebar:
+  order: 1
+---
+
+The OpenReception calendar page shows you all appointments and available slots by default.
+
+## Navigation
+
+You can use the arrows to the left an right of the shown date to go backwards or forward in the calendar.
+
+You can use the **Today** button to quickly jump to the current date.
+
+## Slots & Appointments
+
+Each channel has their own color. Colors are assigned by default.
+
+- **Available slots** have a transparent background and a border.
+- **Booked appointments** have a background and show the name of the client.
+- **Requested appointments** have a semi-transparent background, a dashed border and show the name of the client.
+
+![Calendar with available slots and appointments](./assets/calendar-overview/1-calendar-overview.png)
+
+Hours without appointments or available slots are automatically hidden.
+
+## Filters & Zoom
+
+Open the settings bar by clicking on the filter icon in the top right corner. On larger screen this filter bar is always shown.
+
+You can filter by **appointment availability**, **channel** and **agent**. This allows you to look at todays schedule (for any agent or channel) and seach for the next available slot.
+
+![Calendar with open filter bar](./assets/calendar-overview/2-calendar-filters.png)
+
+Using the **channel** filter will only show appointments and slots for the respective channel.
+
+![Calendar with channel filter](./assets/calendar-overview/3-calendar-filter-channels.png)
+
+Using the **agents** filter will only show appointments and slots with this agent.
+
+![Calendar with agents filter](./assets/calendar-overview/4-calendar-filters-agents.png)
+
+All filters can be combined.
+
+You may also change the **calendar zoom** so it fit's your slot duration best.
+
+## Appointment Details
+
+When clicking on an appointment a modal will open and show the details for this appointment.
+
+Clicking on the E-Mail Address will automatically open your E-Mail application.
+
+Clicking on the Phone Number will automatically start a call, if you have a phone app installed on your device.
+
+![Appointment Details withing the calendar](./assets/calendar-overview/5-appointment-details.png)
@@ -0,0 +1,34 @@
+---
+title: Add Channel
+description: This step-by-step guide shows you how to add a channel to OpenReception
+lastUpdated: 2026-03-01
+sidebar:
+  order: 2
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+:::note
+Before you add a channel, make sure you've [set up all the tenant languages](../../settings/base-settings).
+:::
+
+<Steps>
+
+1. Navigate to the channels section of the dashboard and click on _Add Channel_
+
+   ![Empty channels list](./assets/add-channel/1-empty-channels-list.png)
+
+1. A modal with a form opens.
+   - Add a **name** and **description** in all your languages
+   - Select the **agents** that can conduct appointments in this channel. When auto-secting agents they will be selected in the order you've set in this list.
+   - Select the **staff members** that will get notifications about this channel (for appointment requests).
+   - Select if this channel should be **public**. If It's not public, only you can book an appointment using the [calendar](../calendar)
+   - Select if appointments **require confirmation**. You will be [notified by the notification system](../staff/notifications) if a new request is added.
+   - Add a **schedule** for you appointments. See [slot templates](../#slot-templates).
+
+   ![Add channel form](./assets/add-channel/2-add-channel-form.png)
+
+1. Then click _Add Channel_ and it will be saved.
+   ![Channel added](./assets/add-channel/3-channel-added.png)
+
+</Steps>
@@ -0,0 +1,35 @@
+---
+title: Deactivate/Activate Channel
+description: This step-by-step guide shows you how to deactivate/ activate a channel in OpenReception
+lastUpdated: 2026-03-01
+sidebar:
+  order: 4
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+If you don't want to accept new appointments in a channel, you can deactivate it.
+
+:::note
+This page shows how to activate a channel. The same process applies to deactivating a channel.
+:::
+
+<Steps>
+
+1. Navigate to the channels section of the dashboard, search for the channel you want to activate/deactivate and open the context menu for it. Click on _Activate_.
+
+   ![Channel list with activate option](./assets/deactivate-channel/1-channels-list-with-context-menu-activate.png)
+
+1. A modal opens. Click _Activate Channel_
+
+   ![Edit channel form](./assets/deactivate-channel/2-activate-channel-form.png)
+
+1. The channel will be activated. It will appear in the channel list for [booking appointments](../../client-side/book-appointment) again.
+
+   ![Channel activated](./assets/deactivate-channel/3-channel-activated.png)
+
+</Steps>
+
+You can now run the same process to deactivate the channel.
+
+![Channel list with deactivate option](./assets/deactivate-channel/4-channels-list-with-context-menu-deactivate.png)
@@ -0,0 +1,29 @@
+---
+title: Delete Channel
+description: This step-by-step guide shows you how to remove a channel from OpenReception
+lastUpdated: 2026-03-01
+sidebar:
+  order: 5
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+:::danger
+If you delete a channel all the appointments will be removed as well. This process cannot be undone.
+:::
+
+<Steps>
+
+1. Navigate to the channels section of the dashboard, search for the channel you want to delete and open the context menu for it. Click on _Delete_.
+
+   ![Empty channels list](./assets/delete-channel/1-channels-list-with-context-menu.png)
+
+1. A modal with a form opens. Enter the name of the channel and click _Delete Channel_
+
+   ![Delete channel form](./assets/delete-channel/2-delete-channel-form.png)
+
+1. The channel will be removed.
+
+   ![Channel deleted](./assets/delete-channel/3-channel-deleted.png)
+
+</Steps>
@@ -0,0 +1,35 @@
+---
+title: Edit Channel
+description: This step-by-step guide shows you how to edit a channel in OpenReception
+lastUpdated: 2026-03-01
+sidebar:
+  order: 3
+---
+
+import {Steps} from "@astrojs/starlight/components";
+
+:::note
+If you use descriptions and have added languages since the last time you've edited a channel, you can only save your changes, if you add descriptions of all missing languages.
+:::
+
+<Steps>
+
+1. Navigate to the channels section of the dashboard, search for the channel you want to edit and open the context menu for it. Click on _Edit_.
+
+   ![Channel list](./assets/edit-channel/1-channels-list-with-context-menu.png)
+
+1. A modal with a form opens.
+   - Edit the **name** and **description** in all your languages, if you want
+   - Change the selection for **agents** that can conduct appointments in this channel. When auto-secting agents they will be selected in the order you've set in this list.
+   - Change the selection for **staff members** that will get notifications about this channel (for appointment requests).
+   - Change if this channel should be **public**. If It's not public, only you can book an appointment using the [calendar](../calendar)
+   - Change if appointments **require confirmation**. You will be [notified by the notification system](../staff/notifications) if a new request is added.
+   - Add a **schedule** for you appointments. See [slot templates](../#slot-templates).
+
+   ![Edit channel form](./assets/edit-channel/2-edit-channel-form.png)
+
+1. The channel will be updated.
+
+   ![Channel edited](./assets/edit-channel/3-channel-edited.png)
+
+</Steps>
@@ -0,0 +1,54 @@
+---
+title: Channels (Overview)
+description: Channels are a way to collect different types of appointments.
+sidebar:
+  order: 1
+---
+
+import {CardGrid} from "@astrojs/starlight/components";
+import {LinkCard} from "@astrojs/starlight/components";
+
+**Channels** are a way to collect different types of appointments. You can assign multiple [agents](../agents) to one channel and each agent can be assigned to multiple channels.
+
+<CardGrid>
+  <LinkCard
+    title="Add Channel"
+    href="./add-channel"
+    description="Add a new channel to your instance"
+  />
+  <LinkCard
+    title="Edit Channel"
+    href="./edit-channel"
+    description="Changing an channels details"
+  />
+  <LinkCard
+    title="Pause Channel"
+    href="./deactivate-channel"
+    description="Stop taking new appointments for a channel"
+  />
+  <LinkCard
+    title="Delete Channel"
+    href="./delete-channel"
+    description="Removing an channel"
+  />
+</CardGrid>
+
+## Require Confirmation
+
+You have full control over your calendar. This is why you can require clients to request a confirmation to make an appointment.
+
+Therefore just check the option to **require confirmation** in the channel settings. When enabled, clients will be informed that their apppointment is just a request.
+
+Once the request is added, staff members that are linked to the channel will be [notified using the notification system](../staff/notifications).
+
+The notification will lead you to the appointment, where you can [confirm](../calendar/confirm-appointment) or [deny](../calendar/deny-appointment) it.
+
+## Slot Templates
+
+Channels use slot templates that automatically create available slots based on your settings. If you want one of your agents/ all you agents to be unavailable in a given timespan, you just have to [add an absence](../agents/add-absence) for them.
+
+You can add as many schedule templates as you like. Each template consists of
+
+- the weekdays you offer this appointment for (Monday, Tuesday, ...)
+- the hours and minutes this template starts and ends (08:00 AM, 08:15 AM, ...)
+- the duration of the slots within this template
--- a/Show More
+++ b/Show More