feat: add hosted embed URL functionality and enhance widget embed options with tabbed interface

apps/api/src/services/widget-payload.ts

@@ -171,6 +171,16 @@ export function getWidgetEmbedCode(publicKey: string): string {
   return `<div data-cio-widget="course-widget" data-widget-key="${publicKey}" data-api-base-url="${apiBaseUrl}"></div>\n<script async type="module" src="${scriptUrl}"></script>`;
 }
 
+export function getWidgetHostedEmbedUrl(publicKey: string): string {
+  const embedBaseUrl = (
+    env.PUBLIC_EMBED_BASE_URL ||
+    (env.NODE_ENV === 'development' ? DEFAULT_LOCAL_EMBED_BASE_URL : DEFAULT_EMBED_CDN_BASE_URL)
+  ).replace(/\/$/, '');
+  const apiBaseUrl = getWidgetApiBaseUrl();
+
+  return `${embedBaseUrl}/embeds/course-widget/embed.html?key=${encodeURIComponent(publicKey)}&api=${encodeURIComponent(apiBaseUrl)}`;
+}
+
 type OrgCourse = Awaited<ReturnType<typeof getOrgCourses>>['items'][number];
 
 export function formatCourseForWidget(

apps/api/src/services/widget.ts

@@ -30,6 +30,7 @@ import {
   getCourseBaseUrl,
   getCourseWidgetScriptUrl,
   getWidgetEmbedCode,
+  getWidgetHostedEmbedUrl,
   listWidgetAvailableEditorData
 } from './widget-payload';
 
@@ -100,6 +101,7 @@ export async function getOrganizationWidgetDetail(orgId: string, widgetId: strin
         config: normalizeWidgetConfig(widget.config as Record<string, unknown>, editorData.planName),
         selectedCourseIds: selectedCourses.map((course) => course.courseId),
         embedCode: getWidgetEmbedCode(widget.publicKey),
+        hostedEmbedUrl: getWidgetHostedEmbedUrl(widget.publicKey),
         publicScriptUrl: getCourseWidgetScriptUrl()
       },
       organization: {
@@ -227,6 +229,7 @@ export async function publishOrganizationWidget(orgId: string, widgetId: string,
       version,
       payload,
       embedCode: getWidgetEmbedCode(widget.publicKey),
+      hostedEmbedUrl: getWidgetHostedEmbedUrl(widget.publicKey),
       publicScriptUrl: getCourseWidgetScriptUrl()
     };
   } catch (error) {