feat(sdk): render root-url in embed code if necessary

jeremyckahn · Oct 24, 2023 · bd8cf39 · bd8cf39
1 parent 86eadae
commit bd8cf39
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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>