code · pull · Apr 14, 2026 · Apr 14, 2026 · Apr 14, 2026 · Apr 14, 2026
diff --git a/apps/docs/app/[[...mdxPath]]/page.tsx b/apps/docs/app/[[...mdxPath]]/page.tsx
@@ -0,0 +1,28 @@
+import { generateStaticParamsFor, importPage } from "nextra/pages";
+import { useMDXComponents as getMDXComponents } from "../../mdx-components";
+
+export const generateStaticParams = generateStaticParamsFor("mdxPath");
+
+export async function generateMetadata(props: {
+  params: Promise<{ mdxPath?: string[] }>;
+}) {
+  const params = await props.params;
+  const { metadata } = await importPage(params.mdxPath);
+  return metadata;
+}
+
+const Wrapper = getMDXComponents().wrapper;
+
+export default async function Page(props: {
+  params: Promise<{ mdxPath?: string[] }>;
+}) {
+  const params = await props.params;
+  const { default: MDXContent, toc, metadata } = await importPage(
+    params.mdxPath,
+  );
+  return (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  );
+}
diff --git a/apps/docs/app/fonts.css b/apps/docs/app/fonts.css
@@ -0,0 +1,17 @@
+/* Cal Sans for headlines */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-cal), sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  font-feature-settings: normal;
+}
+
+/* Cal Sans UI for body text */
+body {
+  font-family: var(--font-cal-ui), sans-serif;
+}
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
@@ -0,0 +1,90 @@
+import { Footer, Layout, Navbar } from "nextra-theme-docs";
+import { Head } from "nextra/components";
+import { getPageMap } from "nextra/page-map";
+import localFont from "next/font/local";
+import "nextra-theme-docs/style.css";
+import "./logo.css";
+import "./fonts.css";
+
+const calSans = localFont({
+  src: "../fonts/CalSans-Regular.woff2",
+  variable: "--font-cal",
+  display: "swap",
+  weight: "400",
+});
+
+const calSansUI = localFont({
+  src: [
+    { path: "../fonts/CalSansUI-UILight.woff2", weight: "300" },
+    { path: "../fonts/CalSansUI-UIRegular.woff2", weight: "400" },
+    { path: "../fonts/CalSansUI-UIMedium.woff2", weight: "500" },
+    { path: "../fonts/CalSansUI-UISemiBold.woff2", weight: "600" },
+    { path: "../fonts/CalSansUI-UIBold.woff2", weight: "700" },
+  ],
+  variable: "--font-cal-ui",
+  display: "swap",
+});
+
+const navbar: React.ReactElement = (
+  <Navbar
+    logo={
+      <>
+        <img
+          src="/cal-docs-logo.svg"
+          alt="Cal.diy Docs"
+          height={26}
+          className="logo-light"
+          style={{ height: 26 }}
+        />
+        <img
+          src="/cal-docs-logo-white.svg"
+          alt="Cal.diy Docs"
+          height={26}
+          className="logo-dark"
+          style={{ height: 26 }}
+        />
+      </>
+    }
+  />
+);
+
+const footer: React.ReactElement = (
+  <Footer>
+    <small>
+      Cal.diy is the open source community edition of Cal.com. Cal.com® and Cal®
+      are a registered trademark by Cal.com, Inc. All rights reserved.
+    </small>
+  </Footer>
+);
+
+export const metadata: { title: string; description: string } = {
+  title: "Cal.com Docs",
+  description: "Cal.com self-hosting documentation",
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html
+      lang="en"
+      dir="ltr"
+      suppressHydrationWarning
+      className={`${calSans.variable} ${calSansUI.variable}`}
+    >
+      <Head />
+      <body>
+        <Layout
+          navbar={navbar}
+          pageMap={await getPageMap()}
+          docsRepositoryBase="https://github.com/calcom/cal.com/tree/main/apps/docs"
+          footer={footer}
+        >
+          {children}
+        </Layout>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/docs/app/logo.css b/apps/docs/app/logo.css
@@ -0,0 +1,11 @@
+.logo-dark {
+  display: none;
+}
+
+html.dark .logo-light {
+  display: none;
+}
+
+html.dark .logo-dark {
+  display: block;
+}
diff --git a/apps/docs/content/_meta.ts b/apps/docs/content/_meta.ts
@@ -0,0 +1,17 @@
+export default {
+  index: "Introduction",
+  "-- getting-started": {
+    type: "separator",
+    title: "Getting Started",
+  },
+  installation: "Installation",
+  "database-migrations": "Database Migrations",
+  upgrading: "Upgrading",
+  docker: "Docker",
+  apps: "Apps",
+  "-- deployments": {
+    type: "separator",
+    title: "Deployments",
+  },
+  deployments: "Deployments",
+};
diff --git a/apps/docs/content/apps/_meta.ts b/apps/docs/content/apps/_meta.ts
@@ -0,0 +1,11 @@
+export default {
+  google: "Google",
+  microsoft: "Microsoft",
+  zoom: "Zoom",
+  daily: "Daily",
+  hubspot: "HubSpot",
+  sendgrid: "Sendgrid",
+  stripe: "Stripe",
+  twilio: "Twilio",
+  zoho: "Zoho",
+};
diff --git a/apps/docs/content/apps/daily.mdx b/apps/docs/content/apps/daily.mdx
@@ -0,0 +1,13 @@
+# Daily
+
+#### Obtaining Daily API Credentials
+
+1. **Open Daily and sign into your account** - Go to [Daily](https://daily.co) and sign into your account.
+
+2. **Navigate to the Developers tab** - From within your dashboard, go to the developers tab.
+
+3. **Copy your API key** - Copy the API key provided in the developers tab.
+
+4. **Paste the API key into the .env file** - Now paste the API key into the `DAILY_API_KEY` field in your `.env` file.
+
+5. **Set the DAILY_SCALE_PLAN variable (optional)** - If you have the Daily Scale Plan, set the `DAILY_SCALE_PLAN` variable to `true` in the `.env` file to use features like video recording.
diff --git a/apps/docs/content/apps/google.mdx b/apps/docs/content/apps/google.mdx
@@ -0,0 +1,44 @@
+# Google
+
+#### Obtaining the Google API Credentials
+
+1. **Open Google API Console** - Go to [Google API Console](https://console.cloud.google.com/apis/dashboard). If you don't have a project in your Google Cloud subscription, create one before proceeding. Under the Dashboard pane, select "Enable APIs and Services".
+
+2. **Search for the Google Calendar API** - In the search box, type "calendar" and select the Google Calendar API search result.
+
+3. **Enable the Google Calendar API** - Enable the selected API to proceed.
+
+4. **Configure the OAuth Consent Screen** - Go to the [OAuth consent screen](https://console.cloud.google.com/apis/credentials/consent) from the side pane. Select the app type (Internal or External) and enter the basic app details on the first page.
+
+5. **Add Calendar Scopes** - On the Scopes page, select "Add or Remove Scopes". Search for Calendar.event and select the scopes with values `.../auth/calendar.events`, `.../auth/calendar.readonly`, and then click "Update".
+
+6. **Add Test Users** - On the Test Users page, add the Google account(s) you'll be using. Verify details on the last page to complete the consent screen configuration.
+
+7. **Create OAuth Credentials** - From the side pane, select [Credentials](https://console.cloud.google.com/apis/credentials) and then "Create Credentials". Choose "OAuth Client ID".
+
+8. **Select Web Application as the Application Type** - Choose "Web Application" as the Application Type.
+
+9. **Add Authorized Redirect URIs** - Under Authorized redirect URI's, add the URIs:
+
+```
+<Cal.com URL>/api/integrations/googlecalendar/callback
+<Cal.com URL>/api/auth/callback/google
+```
+
+Replace `<Cal.com URL>` with the URL where your application runs.
+
+10. **Download the OAuth Client ID JSON** - The key will be created, redirecting you back to the Credentials page. Select the new client ID under "OAuth 2.0 Client IDs", then click "Download JSON". Copy the JSON file contents and paste the entire string into the `.env` and `.env.appStore` files under the `GOOGLE_API_CREDENTIALS` key.
+
+11. **Set the Google Integration as Internal** - In the `.env` file, set the following environment variable:
+
+```
+GOOGLE_LOGIN_ENABLED=false
+```
+
+This will configure the Google integration as an Internal app, restricting login access.
+
+### Adding Google Calendar to Cal.com App Store
+
+After adding Google credentials, you can now add the Google Calendar App to the app store. Repopulate the App store by running:
+
+1. **Repopulate App Store** - Run `pnpm db-seed` to update the app store and include the newly added Google Calendar integration.
diff --git a/apps/docs/content/apps/hubspot.mdx b/apps/docs/content/apps/hubspot.mdx
@@ -0,0 +1,34 @@
+# HubSpot
+
+### Obtaining HubSpot Client ID and Secret
+
+1. **Sign into HubSpot Developer** - Go to [HubSpot Developer](https://developers.hubspot.com/) and sign into your account, or create a new one.
+
+2. **Navigate to Manage Apps** - From the Developer account home page, go to "Manage apps".
+
+3. **Create a new app** - Click the "Create app" button located at the top right corner of the page.
+
+4. **Fill in App Information** - In the "App info" tab, fill in any information you want for your app.
+
+5. **Go to the Auth tab** - Navigate to the "Auth" tab to set up authentication for the app.
+
+6. **Copy Client ID and Client Secret** - Copy the Client ID and Client Secret and add them to your `.env` file under the fields:
+
+```
+HUBSPOT_CLIENT_ID
+HUBSPOT_CLIENT_SECRET
+```
+
+7. **Set the Redirect URL for OAuth** - Set the Redirect URL for OAuth to:
+
+```
+<Cal.com URL>/api/integrations/hubspot/callback
+```
+
+Replace `<Cal.com URL>` with the URL where your application is hosted.
+
+8. **Select Required Scopes** - In the "Scopes" section, select "Read" and "Write" for the scope called `crm.objects.contacts`.
+
+9. **Save the Application** - Click the "Save" button at the bottom of the page.
+
+10. **Complete HubSpot Integration** - You're all set! Any booking in Cal.com will now be created as a meeting in HubSpot for your contacts.
diff --git a/apps/docs/content/apps/microsoft.mdx b/apps/docs/content/apps/microsoft.mdx
@@ -0,0 +1,21 @@
+# Microsoft
+
+#### Obtaining Microsoft Graph Client ID and Secret
+
+1. **Open Azure App Registration** - Go to [Azure App Registration](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade) and select "New registration".
+
+2. **Name your application** - Provide a name for your application to proceed with the registration.
+
+3. **Set who can use this application** - Set "Who can use this application or access this API?" to "Accounts in any organizational directory (Any Azure AD directory - Multitenant)".
+
+4. **Configure the Web redirect URI** - Set the Web redirect URI to:
+
+```
+<Cal.com URL>/api/integrations/office365calendar/callback
+```
+
+Replace `<Cal.com URL>` with the URL where your application runs.
+
+5. **Obtain and set the MS_GRAPH_CLIENT_ID** - Use the Application (client) ID as the value for `MS_GRAPH_CLIENT_ID` in your `.env` file.
+
+6. **Create a client secret and set MS_GRAPH_CLIENT_SECRET** - Click on "Certificates & secrets", create a new client secret, and use the generated value as the `MS_GRAPH_CLIENT_SECRET` in your `.env` file.
diff --git a/apps/docs/content/apps/sendgrid.mdx b/apps/docs/content/apps/sendgrid.mdx
@@ -0,0 +1,21 @@
+# Sendgrid
+
+1. **Create a SendGrid account** - Go to [https://signup.sendgrid.com/](https://signup.sendgrid.com/) and create a new SendGrid account.
+
+2. **Generate an API key** - Navigate to **Settings** -> **API Keys** and create a new API key.
+
+3. **Add API key to .env** - Copy the generated API key and add it to your `.env` file under the field:
+
+```
+SENDGRID_API_KEY
+```
+
+4. **Verify a sender email** - Go to **Settings** -> **Sender Authentication** and verify a single sender.
+
+5. **Add verified email to .env** - Copy the verified email address and add it to your `.env` file under the field:
+
+```
+SENDGRID_EMAIL
+```
+
+> This app is **required** for Workflows
diff --git a/apps/docs/content/apps/stripe.mdx b/apps/docs/content/apps/stripe.mdx
@@ -0,0 +1,29 @@
+# Stripe
+
+### Setting up Stripe
+
+1. **Create or log into a Stripe account** - Go to [Stripe](https://stripe.com) and either create a new account or log into an existing one. For testing, activate the Test-Mode toggle in the top right of the Stripe dashboard.
+
+2. **Save API keys** - Open [Stripe API Keys](https://dashboard.stripe.com/apikeys), then save the token starting with `pk_...` to `NEXT_PUBLIC_STRIPE_PUBLIC_KEY` and `sk_...` to `STRIPE_PRIVATE_KEY` in the `.env` file.
+
+3. **Activate OAuth for Standard Accounts** - Go to [Stripe Connect Settings](https://dashboard.stripe.com/settings/connect) and activate OAuth for Standard Accounts.
+
+4. **Add the redirect URL** - Add the following redirect URL, replacing `<Cal.com URL>` with your application's URL:
+
+```
+<Cal.com URL>/api/integrations/stripepayment/callback
+```
+
+5. **Save the Stripe Client ID** - Copy your client ID (`ca_...`) to `STRIPE_CLIENT_ID` in the `.env` file.
+
+6. **Set up a Stripe webhook** - Open [Stripe Webhooks](https://dashboard.stripe.com/webhooks) and add:
+
+```
+<Cal.com URL>/api/integrations/stripepayment/webhook
+```
+
+as the webhook for connected applications.
+
+7. **Select webhook events** - Select all `payment_intent` and `setup_intent` events for the webhook.
+
+8. **Save the webhook secret** - Copy the webhook secret (`whsec_...`) to `STRIPE_WEBHOOK_SECRET` in the `.env` file.