From 05368963736c7504343ce7c4c145a3fcdf754254 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 3 Aug 2026 20:48:19 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(sdk)=20add=20a=20room=20configuration?=
 =?UTF-8?q?=20popup=20from=20CreateMeetingButton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce a room configuration popup opened from the SDK's
CreateMeetingButton, laid out like the Google Meet "call options"
dialog: logo header, grey section bands, and a footer bar with the
close action.

Like CreatePopup, it runs in a dedicated popup window so it can
access session cookies, which would be blocked in an iframe. If the
user is not authenticated, they are redirected to login and come
back to this popup afterwards.

Permissions are enforced server-side. The room is fetched with the
user's session, and settings are only shown when the room is
administrable by this user. Since #1482 removed the
is_administrable flag from the room serializer (roles now live in
the LiveKit participant attributes, only available in-meeting),
administrability is detected here through the presence of the
`accesses` field, which the backend only serializes for
administrators and owners. The PATCH endpoint enforces the same
permissions server-side regardless.

The settings mirror the in-room Admin panel. Unlike the Admin panel,
there is no LiveKit connection here, so changes are only persisted
in the room configuration (and applied when a session starts):
participants of an ongoing session are not live-synced or notified.
---
 CHANGELOG.md                                  |   1 +
 .../src/features/rooms/api/ApiRoom.ts         |  19 +-
 .../sdk/routes/CreateMeetingButton.tsx        |  23 +-
 .../src/features/sdk/routes/SettingsPopup.tsx | 383 ++++++++++++++++++
 .../src/features/sdk/utils/PopupManager.ts    |  14 +
 src/frontend/src/locales/de/sdk.json          |  10 +-
 src/frontend/src/locales/en/sdk.json          |  10 +-
 src/frontend/src/locales/fr/sdk.json          |  10 +-
 src/frontend/src/locales/nl/sdk.json          |  10 +-
 src/frontend/src/routes.ts                    |   7 +
 10 files changed, 478 insertions(+), 9 deletions(-)
 create mode 100644 src/frontend/src/features/sdk/routes/SettingsPopup.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 419e7776..b198d70f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to
 - ✨(frontend) expose media state to external gateways
 - ✨(frontend) add connection test feature
 - ✨(sdk) allow passing a background color to the calendar iframe
+- ✨(sdk) add a room configuration popup from CreateMeetingButton
 
 ### Changed
 
diff --git a/src/frontend/src/features/rooms/api/ApiRoom.ts b/src/frontend/src/features/rooms/api/ApiRoom.ts
index 7c8fde65..86309a83 100644
--- a/src/frontend/src/features/rooms/api/ApiRoom.ts
+++ b/src/frontend/src/features/rooms/api/ApiRoom.ts
@@ -18,6 +18,14 @@ export type RoomConfiguration = {
   everyone_can_mute?: boolean | null
 }
 
+export type ParticipantRole = 'member' | 'administrator' | 'owner'
+export type AssignableParticipantRole = Exclude<ParticipantRole, 'owner'>
+
+export type ApiResourceAccess = {
+  id: string
+  role: ParticipantRole
+}
+
 export type ApiRoom = {
   id: string
   name: string
@@ -27,7 +35,12 @@ export type ApiRoom = {
   access_level: ApiAccessLevel
   livekit?: ApiLiveKit
   configuration?: RoomConfiguration
+  /**
+   * Only present in the API response when the requesting user is an
+   * administrator or owner of the room (see RoomSerializer.to_representation
+   * in the backend). Its presence can therefore be used to detect
+   * administrability outside of a LiveKit session, where the room_role
+   * participant attribute is not available.
+   */
+  accesses?: ApiResourceAccess[]
 }
-
-export type ParticipantRole = 'member' | 'administrator' | 'owner'
-export type AssignableParticipantRole = Exclude<ParticipantRole, 'owner'>
diff --git a/src/frontend/src/features/sdk/routes/CreateMeetingButton.tsx b/src/frontend/src/features/sdk/routes/CreateMeetingButton.tsx
index ca8445bb..6527f80f 100644
--- a/src/frontend/src/features/sdk/routes/CreateMeetingButton.tsx
+++ b/src/frontend/src/features/sdk/routes/CreateMeetingButton.tsx
@@ -4,7 +4,7 @@ import { Link } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { HStack, VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
-import { RiCloseLine, RiFileCopyLine } from '@remixicon/react'
+import { RiCloseLine, RiFileCopyLine, RiSettings3Line } from '@remixicon/react'
 import { Text } from '@/primitives'
 import { Spinner } from '@/primitives/Spinner'
 import { buttonRecipe } from '@/primitives/buttonRecipe'
@@ -37,6 +37,11 @@ const CreateMeetingButton = () => {
     initialRoom
   )
 
+  const [isRoomCreatedInSession, setIsRoomCreatedInSession] = useState(false)
+
+  const showSettingsButton =
+    isRoomCreatedInSession || searchParams.get('settings') === 'true'
+
   const { data } = useRoomCreationCallback({ callbackId })
 
   const roomUrl = useMemo(() => {
@@ -74,6 +79,7 @@ const CreateMeetingButton = () => {
   useEffect(() => {
     if (!data?.room?.slug) return
     setRoom(data.room)
+    setIsRoomCreatedInSession(true)
     setCallbackId(undefined)
     setIsPending(false)
     popupManager.sendRoomData({
@@ -89,6 +95,7 @@ const CreateMeetingButton = () => {
       (id) => setCallbackId(id),
       (data) => {
         setRoom(data)
+        setIsRoomCreatedInSession(true)
         setIsPending(false)
       }
     )
@@ -98,6 +105,7 @@ const CreateMeetingButton = () => {
 
   const resetState = () => {
     setRoom(undefined)
+    setIsRoomCreatedInSession(false)
     setCallbackId(undefined)
     setIsPending(false)
     popupManager.clearState()
@@ -158,14 +166,25 @@ const CreateMeetingButton = () => {
               {t('joinButton')}
             </Link>
             <HStack gap={0}>
+              {showSettingsButton && (
+                <Button
+                  variant="quaternaryText"
+                  square
+                  icon={<RiSettings3Line />}
+                  aria-label={t('settingsTooltip')}
+                  onPress={() => {
+                    popupManager.createSettingsPopupWindow(room.slug, () => {})
+                  }}
+                />
+              )}
               <Button
                 variant="quaternaryText"
                 square
                 icon={<RiFileCopyLine />}
-                tooltip={t('copyLinkTooltip')}
                 onPress={() => {
                   navigator.clipboard.writeText(roomUrl)
                 }}
+                aria-label={t('copyLinkTooltip')}
               />
               {searchParams.get('readOnly') === 'false' && (
                 <Button
diff --git a/src/frontend/src/features/sdk/routes/SettingsPopup.tsx b/src/frontend/src/features/sdk/routes/SettingsPopup.tsx
new file mode 100644
index 00000000..cf3dfa9d
--- /dev/null
+++ b/src/frontend/src/features/sdk/routes/SettingsPopup.tsx
@@ -0,0 +1,383 @@
+import { useEffect, useMemo, type ReactNode } from 'react'
+import { useSearchParams } from 'wouter'
+import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
+import { Track } from 'livekit-client'
+import { css } from '@/styled-system/css'
+import { Button, Field, H, Text } from '@/primitives'
+import { Spinner } from '@/primitives/Spinner'
+import { keys } from '@/api/queryKeys'
+import { queryClient } from '@/api/queryClient'
+import { useConfig } from '@/api/useConfig'
+import { useUser } from '@/features/auth/api/useUser'
+import { authUrl } from '@/features/auth/utils/authUrl'
+import { fetchRoom } from '@/features/rooms/api/fetchRoom'
+import { usePatchRoom } from '@/features/rooms/api/patchRoom'
+import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
+import { updatePublishSources } from '@/features/rooms/livekit/hooks/usePublishSourcesManager'
+import { isSubsetOf } from '@/features/rooms/utils/isSubsetOf'
+
+type Source = Track.Source
+
+const SectionHeader = ({ children }: { children: ReactNode }) => (
+  <div
+    className={css({
+      backgroundColor: 'greyscale.50',
+      borderTopWidth: '1px',
+      borderTopStyle: 'solid',
+      borderTopColor: 'greyscale.250',
+      borderBottomWidth: '1px',
+      borderBottomStyle: 'solid',
+      borderBottomColor: 'greyscale.250',
+      padding: '0.75rem 1.5rem',
+    })}
+  >
+    <H
+      lvl={2}
+      margin={false}
+      className={css({
+        fontWeight: 500,
+        fontSize: '1.125rem',
+      })}
+    >
+      {children}
+    </H>
+  </div>
+)
+
+const SectionBody = ({ children }: { children: ReactNode }) => (
+  <div
+    className={css({
+      display: 'flex',
+      flexDirection: 'column',
+      padding: '1rem 1.5rem 1.5rem',
+    })}
+  >
+    {children}
+  </div>
+)
+
+const SettingsPopup = () => {
+  const { t } = useTranslation('sdk', { keyPrefix: 'roomSettings' })
+  const { t: tRooms } = useTranslation('rooms', { keyPrefix: 'admin' })
+
+  const [searchParams] = useSearchParams()
+  const roomSlug = searchParams.get('slug')?.trim()
+
+  const { isLoggedIn } = useUser({ fetchUserOptions: { attemptSilent: false } })
+
+  useEffect(() => {
+    if (isLoggedIn === false) {
+      // returnTo defaults to the current URL, so the user comes back to this
+      // popup (with the slug preserved) once authentication completes.
+      window.location.href = authUrl({})
+    }
+  }, [isLoggedIn])
+
+  const {
+    data: room,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: [keys.room, roomSlug],
+    queryFn: () => fetchRoom({ roomId: roomSlug as string }),
+    enabled: !!isLoggedIn && !!roomSlug,
+    retry: false,
+  })
+
+  const { mutateAsync: patchRoom } = usePatchRoom()
+  const { data: configData } = useConfig()
+
+  const configuration = room?.configuration
+
+  const currentSources = useMemo(() => {
+    const defaultSources = configData?.livekit?.default_sources ?? []
+
+    if (
+      configuration?.can_publish_sources == undefined ||
+      !Array.isArray(configuration?.can_publish_sources)
+    ) {
+      return defaultSources
+    }
+    return configuration.can_publish_sources
+  }, [configData, configuration?.can_publish_sources])
+
+  const patchConfiguration = (
+    newConfiguration: NonNullable<typeof configuration>
+  ) => {
+    if (!roomSlug) return
+    patchRoom({
+      roomId: roomSlug,
+      room: { configuration: newConfiguration },
+    })
+      .then((updatedRoom) => {
+        queryClient.setQueryData([keys.room, roomSlug], updatedRoom)
+      })
+      .catch((e) => console.error(e))
+  }
+
+  const updateSource = (sources: Source[], enabled: boolean) => {
+    patchConfiguration({
+      ...configuration,
+      can_publish_sources: updatePublishSources(
+        currentSources,
+        sources,
+        enabled
+      ),
+    })
+  }
+
+  const toggleMicrophone = (enabled: boolean) =>
+    updateSource([Track.Source.Microphone], enabled)
+  const toggleCamera = (enabled: boolean) =>
+    updateSource([Track.Source.Camera], enabled)
+  const toggleScreenShare = (enabled: boolean) =>
+    updateSource(
+      [Track.Source.ScreenShare, Track.Source.ScreenShareAudio],
+      enabled
+    )
+  const toggleMuting = (enabled: boolean) =>
+    patchConfiguration({
+      ...configuration,
+      everyone_can_mute: enabled,
+    })
+
+  const isMicrophoneEnabled = isSubsetOf(
+    [Track.Source.Microphone],
+    currentSources
+  )
+  const isCameraEnabled = isSubsetOf([Track.Source.Camera], currentSources)
+  const isScreenShareEnabled = isSubsetOf(
+    [Track.Source.ScreenShare, Track.Source.ScreenShareAudio],
+    currentSources
+  )
+  const isMutingEnabled = configuration?.everyone_can_mute ?? true
+
+  const renderCentered = (children: ReactNode) => (
+    <div
+      className={css({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+        padding: '1.5rem',
+      })}
+    >
+      {children}
+    </div>
+  )
+
+  if (!roomSlug || isError) {
+    return renderCentered(
+      <Text variant="note" margin={false}>
+        {t('error')}
+      </Text>
+    )
+  }
+
+  if (isLoggedIn === undefined || isLoggedIn === false || isLoading || !room) {
+    return renderCentered(<Spinner />)
+  }
+
+  const isAdministrable = room.accesses !== undefined
+
+  if (!isAdministrable) {
+    return renderCentered(
+      <Text variant="note" margin={false}>
+        {t('notAllowed')}
+      </Text>
+    )
+  }
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        minHeight: 0,
+      })}
+    >
+      <header
+        className={css({
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          gap: '0.5rem',
+          padding: '1.5rem',
+          borderBottomWidth: '1px',
+          borderBottomStyle: 'solid',
+          borderBottomColor: 'greyscale.250',
+        })}
+      >
+        <img
+          src="/assets/logo.svg"
+          alt=""
+          className={css({
+            maxHeight: '40px',
+            flexShrink: 0,
+          })}
+        />
+        <div className={css({ display: 'flex', flexDirection: 'column' })}>
+          <H
+            lvl={1}
+            margin={false}
+            className={css({
+              fontWeight: 500,
+            })}
+          >
+            {t('title')}
+          </H>
+          <Text variant="smNote" margin={false}>
+            {roomSlug}
+          </Text>
+        </div>
+      </header>
+      <div
+        className={css({
+          flexGrow: 1,
+          overflowY: 'auto',
+          minHeight: 0,
+        })}
+      >
+        <SectionHeader>{tRooms('moderation.title')}</SectionHeader>
+        <SectionBody>
+          <Text
+            variant="note"
+            wrap="balance"
+            className={css({
+              textStyle: 'sm',
+            })}
+            margin={'md'}
+          >
+            {tRooms('moderation.description')}
+          </Text>
+          <div
+            className={css({
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '0.75rem',
+            })}
+          >
+            <Field
+              type="switch"
+              label={tRooms('moderation.microphone.label')}
+              description={tRooms('moderation.microphone.description')}
+              isSelected={isMicrophoneEnabled}
+              onChange={toggleMicrophone}
+              wrapperProps={{
+                noMargin: true,
+                fullWidth: true,
+              }}
+            />
+            <Field
+              type="switch"
+              label={tRooms('moderation.camera.label')}
+              description={tRooms('moderation.camera.description')}
+              isSelected={isCameraEnabled}
+              onChange={toggleCamera}
+              wrapperProps={{
+                noMargin: true,
+                fullWidth: true,
+              }}
+            />
+            <Field
+              type="switch"
+              label={tRooms('moderation.screenshare.label')}
+              description={tRooms('moderation.screenshare.description')}
+              isSelected={isScreenShareEnabled}
+              onChange={toggleScreenShare}
+              wrapperProps={{
+                noMargin: true,
+                fullWidth: true,
+              }}
+            />
+            <Field
+              type="switch"
+              label={tRooms('moderation.mute.label')}
+              description={tRooms('moderation.mute.description')}
+              isSelected={isMutingEnabled}
+              onChange={toggleMuting}
+              wrapperProps={{
+                noMargin: true,
+                fullWidth: true,
+              }}
+            />
+          </div>
+        </SectionBody>
+        <SectionHeader>{tRooms('access.title')}</SectionHeader>
+        <SectionBody>
+          <Text
+            variant="note"
+            wrap="balance"
+            className={css({
+              textStyle: 'sm',
+            })}
+            margin={'md'}
+          >
+            {tRooms('access.description')}
+          </Text>
+          <Field
+            type="radioGroup"
+            label={tRooms('access.type')}
+            aria-label={tRooms('access.type')}
+            labelProps={{
+              className: css({
+                fontSize: '1rem',
+                paddingBottom: '1rem',
+              }),
+            }}
+            value={room.access_level}
+            onChange={(value) =>
+              patchRoom({
+                roomId: roomSlug,
+                room: { access_level: value as ApiAccessLevel },
+              })
+                .then((updatedRoom) => {
+                  queryClient.setQueryData([keys.room, roomSlug], updatedRoom)
+                })
+                .catch((e) => console.error(e))
+            }
+            items={[
+              {
+                value: ApiAccessLevel.PUBLIC,
+                label: tRooms('access.levels.public.label'),
+                description: tRooms('access.levels.public.description'),
+              },
+              {
+                value: ApiAccessLevel.TRUSTED,
+                label: tRooms('access.levels.trusted.label'),
+                description: tRooms('access.levels.trusted.description'),
+              },
+              {
+                value: ApiAccessLevel.RESTRICTED,
+                label: tRooms('access.levels.restricted.label'),
+                description: tRooms('access.levels.restricted.description'),
+              },
+            ]}
+          />
+        </SectionBody>
+      </div>
+      <footer
+        className={css({
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: '1rem',
+          padding: '1rem 1.5rem',
+          borderTopWidth: '1px',
+          borderTopStyle: 'solid',
+          borderTopColor: 'greyscale.250',
+        })}
+      >
+        <Button size="sm" onPress={() => window.close()}>
+          {t('closeButton')}
+        </Button>
+      </footer>
+    </div>
+  )
+}
+
+export default SettingsPopup
diff --git a/src/frontend/src/features/sdk/utils/PopupManager.ts b/src/frontend/src/features/sdk/utils/PopupManager.ts
index e6a7afc8..9d4362a3 100644
--- a/src/frontend/src/features/sdk/utils/PopupManager.ts
+++ b/src/frontend/src/features/sdk/utils/PopupManager.ts
@@ -24,6 +24,20 @@ export class PopupManager {
     }
   }
 
+  public createSettingsPopupWindow(roomSlug: string, onFailure: () => void) {
+    const popupWindow = window.open(
+      `${window.location.origin}/sdk/settings-popup?slug=${encodeURIComponent(roomSlug)}`,
+      'SettingsPopupWindow',
+      `status=no,location=no,toolbar=no,menubar=no,width=600,height=800,left=100,top=100, resizable=yes,scrollbars=yes`
+    )
+
+    if (popupWindow) {
+      popupWindow.focus()
+    } else {
+      onFailure()
+    }
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private messageParent(type: ClientMessageType, data: any) {
     window?.parent.postMessage(
diff --git a/src/frontend/src/locales/de/sdk.json b/src/frontend/src/locales/de/sdk.json
index 8c76fb3e..fa7abd51 100644
--- a/src/frontend/src/locales/de/sdk.json
+++ b/src/frontend/src/locales/de/sdk.json
@@ -5,6 +5,14 @@
     "copyLinkTooltip": "Link kopieren",
     "resetLabel": "Zurücksetzen",
     "participantLimit": "Bis zu 150 Teilnehmende.",
-    "popupBlocked": "Popup wurde blockiert. Bitte erlaube Popups für diese Website."
+    "popupBlocked": "Popup wurde blockiert. Bitte erlaube Popups für diese Website.",
+    "settingsTooltip": "Besprechungseinstellungen"
+  },
+  "roomSettings": {
+    "title": "Besprechungseinstellungen",
+    "description": "Konfiguriere die Besprechung {{roomSlug}}.",
+    "notAllowed": "Du hast keine Berechtigung, die Einstellungen dieser Besprechung zu ändern.",
+    "error": "Die Besprechungseinstellungen konnten nicht geladen werden.",
+    "closeButton": "Schließen"
   }
 }
diff --git a/src/frontend/src/locales/en/sdk.json b/src/frontend/src/locales/en/sdk.json
index 80438d83..86d13bef 100644
--- a/src/frontend/src/locales/en/sdk.json
+++ b/src/frontend/src/locales/en/sdk.json
@@ -5,6 +5,14 @@
     "copyLinkTooltip": "Copy link",
     "resetLabel": "Reset",
     "participantLimit": "Up to 150 participants.",
-    "popupBlocked": "Popup was blocked. Please allow popups for this site."
+    "popupBlocked": "Popup was blocked. Please allow popups for this site.",
+    "settingsTooltip": "Meeting settings"
+  },
+  "roomSettings": {
+    "title": "Meeting settings",
+    "description": "Configure the meeting {{roomSlug}}.",
+    "notAllowed": "You don't have permission to modify this meeting's settings.",
+    "error": "Unable to load meeting settings.",
+    "closeButton": "Close"
   }
 }
diff --git a/src/frontend/src/locales/fr/sdk.json b/src/frontend/src/locales/fr/sdk.json
index 5f04ca3a..a48edff1 100644
--- a/src/frontend/src/locales/fr/sdk.json
+++ b/src/frontend/src/locales/fr/sdk.json
@@ -5,6 +5,14 @@
     "copyLinkTooltip": "Copier le lien",
     "resetLabel": "Réinitialiser",
     "participantLimit": "Jusqu'à 150 participants.",
-    "popupBlocked": "La fenêtre pop-up a été bloquée. Veuillez autoriser les pop-ups pour ce site."
+    "popupBlocked": "La fenêtre pop-up a été bloquée. Veuillez autoriser les pop-ups pour ce site.",
+    "settingsTooltip": "Paramètres de la réunion"
+  },
+  "roomSettings": {
+    "title": "Paramètres de la réunion",
+    "description": "Configurez la réunion {{roomSlug}}.",
+    "notAllowed": "Vous n'avez pas les droits pour modifier les paramètres de cette réunion.",
+    "error": "Impossible de charger les paramètres de la réunion.",
+    "closeButton": "Fermer"
   }
 }
diff --git a/src/frontend/src/locales/nl/sdk.json b/src/frontend/src/locales/nl/sdk.json
index c82ac9a7..a365fdbc 100644
--- a/src/frontend/src/locales/nl/sdk.json
+++ b/src/frontend/src/locales/nl/sdk.json
@@ -5,6 +5,14 @@
     "copyLinkTooltip": "Link kopiëren",
     "resetLabel": "Resetten",
     "participantLimit": "Tot 150 deelnemers.",
-    "popupBlocked": "Pop-up werd geblokkeerd. Sta pop-ups toe voor deze site."
+    "popupBlocked": "Pop-up werd geblokkeerd. Sta pop-ups toe voor deze site.",
+    "settingsTooltip": "Vergaderinstellingen"
+  },
+  "roomSettings": {
+    "title": "Vergaderinstellingen",
+    "description": "Configureer de vergadering {{roomSlug}}.",
+    "notAllowed": "Je hebt geen toestemming om de instellingen van deze vergadering te wijzigen.",
+    "error": "De vergaderinstellingen konden niet worden geladen.",
+    "closeButton": "Sluiten"
   }
 }
diff --git a/src/frontend/src/routes.ts b/src/frontend/src/routes.ts
index aa9b75a6..6e1a0061 100644
--- a/src/frontend/src/routes.ts
+++ b/src/frontend/src/routes.ts
@@ -9,6 +9,7 @@ const CreatePopup = lazy(() => import('@/features/sdk/routes/CreatePopup'))
 const CreateMeetingButton = lazy(
   () => import('@/features/sdk/routes/CreateMeetingButton')
 )
+const SettingsPopup = lazy(() => import('@/features/sdk/routes/SettingsPopup'))
 const LegalTermsRoute = lazy(
   () => import('@/features/legalsTerms/LegalTermsRoute')
 )
@@ -36,6 +37,7 @@ export const routes: Record<
   | 'termsOfService'
   | 'sdkCreatePopup'
   | 'sdkCreateButton'
+  | 'sdkSettingsPopup'
   | 'recordingDownload',
   {
     name: RouteName
@@ -91,6 +93,11 @@ export const routes: Record<
     path: '/sdk/create-button',
     Component: CreateMeetingButton,
   },
+  sdkSettingsPopup: {
+    name: 'sdkSettingsPopup',
+    path: '/sdk/settings-popup',
+    Component: SettingsPopup,
+  },
   recordingDownload: {
     name: 'recordingDownload',
     path: /^\/recording\/(?<recordingId>[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$/,