From bd8cf393c31215ef6c7ec941f240e8e1c7a63ece Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Tue, 24 Oct 2023 09:53:36 -0500
Subject: [PATCH] feat(sdk): render root-url in embed code if necessary

---
 src/Bootstrap.tsx                  |  6 +-----
 src/config/routes.ts               |  4 ++++
 src/pages/Home/EmbedCodeDialog.tsx | 14 +++++++++++---
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx
index 16a23d0cf..4791233ea 100644
--- a/src/Bootstrap.tsx
+++ b/src/Bootstrap.tsx
@@ -11,7 +11,7 @@ import localforage from 'localforage'
 import * as serviceWorkerRegistration from 'serviceWorkerRegistration'
 import { StorageContext } from 'contexts/StorageContext'
 import { SettingsContext } from 'contexts/SettingsContext'
-import { routes } from 'config/routes'
+import { homepageUrl, routes } from 'config/routes'
 import { Home } from 'pages/Home'
 import { About } from 'pages/About'
 import { Disclaimer } from 'pages/Disclaimer'
@@ -29,10 +29,6 @@ export interface BootstrapProps {
   getUuid?: typeof uuid
 }
 
-const homepageUrl = new URL(
-  process.env.REACT_APP_HOMEPAGE ?? 'https://chitchatter.im/'
-)
-
 const getConfigFromParent = () => {
   const queryParams = new URLSearchParams(window.location.search)
 
diff --git a/src/config/routes.ts b/src/config/routes.ts
index 479576e6e..b8e77b46e 100644
--- a/src/config/routes.ts
+++ b/src/config/routes.ts
@@ -7,3 +7,7 @@ export enum routes {
   ROOT = '/',
   SETTINGS = '/settings',
 }
+
+export const homepageUrl = new URL(
+  process.env.REACT_APP_HOMEPAGE ?? 'https://chitchatter.im/'
+)
diff --git a/src/pages/Home/EmbedCodeDialog.tsx b/src/pages/Home/EmbedCodeDialog.tsx
index 4443f911f..9ca8f6102 100644
--- a/src/pages/Home/EmbedCodeDialog.tsx
+++ b/src/pages/Home/EmbedCodeDialog.tsx
@@ -11,6 +11,7 @@ import Link from '@mui/material/Link'
 import { CopyableBlock } from 'components/CopyableBlock/CopyableBlock'
 
 import { iframeFeatureAllowList } from 'config/iframeFeatureAllowList'
+import { homepageUrl } from 'config/routes'
 
 interface EmbedCodeDialogProps {
   showEmbedCode: boolean
@@ -26,6 +27,15 @@ export const EmbedCodeDialog = ({
   const iframeSrc = new URL(`${window.location.origin}/public/${roomName}`)
   iframeSrc.search = new URLSearchParams({ embed: '1' }).toString()
 
+  const needsRootUrlAttribute = window.location.origin !== homepageUrl.origin
+
+  // NOTE: The script src is inaccurate in the local development environment.
+  const sdkEmbedCode = `<script src="${window.location.origin}/sdk.js"></script>
+
+<chat-room room="${roomName}" ${
+    needsRootUrlAttribute ? `root-url="${window.location.origin}/" ` : ''
+  }width="800" height="800" />`
+
   return (
     <Dialog open={showEmbedCode} onClose={handleEmbedCodeWindowClose}>
       <DialogTitle>Room embed code</DialogTitle>
@@ -91,9 +101,7 @@ export const EmbedCodeDialog = ({
             }}
             wrapLines={true}
           >
-            {`<script src="${process.env.REACT_APP_HOMEPAGE}sdk.js"></script>
-
-<chat-room room="${roomName}" width="800" height="800" />`}
+            {sdkEmbedCode}
           </SyntaxHighlighter>
         </CopyableBlock>
       </DialogContent>