diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee4f299..b336c7a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,4 @@
+
 ## v0.1.9
 
 - Added `"use client"` banner to build outputs
@@ -11,10 +12,22 @@
 
 - Added `show` prop to `Popup`, that allows you to specify whether the popup should be shown or hidden.
 
+## v0.1.7-beta.0
+
+- Add `<HtmlPanel>` component
+
+**Note:** This component is currently experimental.
+
 ## v0.1.6
 
 - Added `asGuest?: boolean` prop to `Chatbox`, `Inbox` and `Popup`.
 
+## v0.1.6-beta.0
+
+- Add `<HtmlPanel>` component
+
+**Note:** This component is currently experimental.
+
 ## v0.1.5
 
 - Output ES2015.
diff --git a/README.md b/README.md
index 959d6fb..333d5e8 100644
--- a/README.md
+++ b/README.md
@@ -110,7 +110,7 @@ function ChatComponent() {
 export default ChatComponent;
 ```
 
-For more details and explanation, see our [getting started guide](/Getting_Started/Frameworks/React/).
+For more details and explanation, see our [getting started guide](https://talkjs.com/docs/Getting_Started/Frameworks/React/).
 
 ## Contributing
 
diff --git a/example/App.tsx b/example/App.tsx
index 377577a..e8a366a 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -1,8 +1,15 @@
 import "./App.css";
 
-import { Session, Chatbox, useUnreads } from "../lib/main";
+import { Session, Chatbox, HtmlPanel, useUnreads } from "../lib/main";
 import Talk from "talkjs";
-import { ChangeEvent, useCallback, useMemo, useRef, useState, ReactElement } from "react";
+import {
+  ChangeEvent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  ReactElement,
+} from "react";
 
 const convIds = ["talk-react-94872948u429843", "talk-react-194872948u429843"];
 const users = [
@@ -53,11 +60,6 @@ function App() {
     setConvId(convIds[nextConv]);
   }, [convId]);
 
-  const createUser = useCallback(() => {
-    console.log("createUser");
-    return new Talk.User(me);
-  }, [me]);
-
   const createConv = useCallback(
     (session: Talk.Session) => {
       console.log("createConv");
@@ -104,6 +106,11 @@ function App() {
     setDn(JSON.parse(event.target!.value));
   }, []);
 
+  const [panelHeight, setPanelHeight] = useState(100);
+  const [panelVisible, setPanelVisible] = useState(true);
+
+  const [renderPanel, setPanel] = useState(false);
+
   if (typeof import.meta.env.VITE_APP_ID !== "string") {
     return (
       <div style={{ maxWidth: "50em" }}>
@@ -129,7 +136,7 @@ function App() {
     <>
       <Session
         appId={import.meta.env.VITE_APP_ID}
-        syncUser={createUser}
+        syncUser={() => new Talk.User(me)}
         onBrowserPermissionNeeded={onPerm}
         onUnreadsChange={onUnreads}
         sessionRef={sessionRef}
@@ -150,9 +157,34 @@ function App() {
           loadingComponent={<span>LOADING....</span>}
           {...(blur ? { onBlur } : {})}
           style={{ width: 500, height: 600 }}
-        />
+        >
+          {renderPanel && (
+            <HtmlPanel
+              url="example/panel.html"
+              height={panelHeight}
+              show={panelVisible}
+            >
+              I am an HTML panel.
+              <button
+                onClick={() => setPanelHeight(panelHeight > 100 ? 100 : 150)}
+              >
+                Toggle panel height
+              </button>
+              <button onClick={() => setPanelVisible(false)}>Hide panel</button>
+            </HtmlPanel>
+          )}
+        </Chatbox>
         <UnreadsDisplay />
       </Session>
+
+      <button
+        onClick={() => {
+          setPanel((x) => !x);
+          setPanelVisible(true);
+        }}
+      >
+        {renderPanel ? "Unmount" : "Mount"} HTML panel
+      </button>
       <button onClick={otherMe}>switch user (new session)</button>
       <br />
       <button onClick={switchConv}>
@@ -203,19 +235,30 @@ function UnreadsDisplay() {
   if (unreads === undefined) {
     content = <p>unreads is undefined (no session)</p>;
   } else if (unreads.length === 0) {
-    content = <p>No unread messages</p>
+    content = <p>No unread messages</p>;
   } else {
-    content = <ul>
-      {unreads.map(u => {
-        return <li key={u.conversation.id}>{u.conversation.id} - {u.lastMessage.sender?.name || "system"}: {u.lastMessage.body}</li>
-      })}
-    </ul>
+    content = (
+      <ul>
+        {unreads.map((u) => {
+          return (
+            <li key={u.conversation.id}>
+              {u.conversation.id} - {u.lastMessage.sender?.name || "system"}:{" "}
+              {u.lastMessage.body}
+            </li>
+          );
+        })}
+      </ul>
+    );
   }
 
-  return <details>
-    <summary><strong>Unreads rendered with useUnreads</strong></summary>
-    {content}
-  </details>
+  return (
+    <details>
+      <summary>
+        <strong>Unreads rendered with useUnreads</strong>
+      </summary>
+      {content}
+    </details>
+  );
 }
 
 export default App;
diff --git a/example/panel.html b/example/panel.html
new file mode 100644
index 0000000..8d9f2f9
--- /dev/null
+++ b/example/panel.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!--
+      Put your app's CSS here. For instance, if your bundler generates a CSS
+      file from all component styles, load it here as well and your components
+      will be styled correctly inside the HTML Panel
+    -->
+    <link rel="stylesheet" href="./your-styles.css" />
+
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        background-color: lightblue;
+      }
+      button {
+        display: block;
+        width: 10rem;
+        margin: 0.6rem auto;
+      }
+    </style>
+  </head>
+  <body></body>
+</html>
diff --git a/lib/HtmlPanel.tsx b/lib/HtmlPanel.tsx
new file mode 100644
index 0000000..83b6388
--- /dev/null
+++ b/lib/HtmlPanel.tsx
@@ -0,0 +1,103 @@
+import { useContext, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import Talk from "talkjs";
+import { BoxContext } from "./MountedBox";
+
+type HtmlPanelProps = {
+  /**
+   * The URL you want to load inside the HTML panel. The URL can be absolute or
+   * relative. We recommend using same origin pages to have better control of
+   * the page. Learn more about HTML Panels and same origin pages {@link https://talkjs.com/docs/Features/Customizations/HTML_Panels/ | here}.
+   */
+  url: string;
+
+  /** The panel height in pixels. Defaults to `100px`. */
+  height?: number;
+
+  /** Sets the visibility of the panel. Defaults to `true`. */
+  show?: boolean;
+
+  /** If given, the panel will only show up for the conversation that has an `id` matching the one given. */
+  conversationId?: string;
+
+  /** The content that gets rendered inside the `<body>` of the panel. */
+  children?: React.ReactNode;
+};
+
+export function HtmlPanel({
+  url,
+  height = 100,
+  show = true,
+  conversationId,
+  children,
+}: HtmlPanelProps) {
+  const [panel, setPanel] = useState<undefined | Talk.HtmlPanel>(undefined);
+  const box = useContext(BoxContext);
+
+  const normalizedPanelUrl = new URL(url, document.baseURI);
+  const baseUrl = new URL(document.baseURI);
+  const isCrossOrigin = normalizedPanelUrl.origin !== baseUrl.origin;
+
+  useEffect(() => {
+    async function run() {
+      if (!box || panel) return Promise.resolve(panel);
+
+      const newPanel = await box.createHtmlPanel({
+        url,
+        conversation: conversationId,
+        height,
+        // If the frame is cross-origin, we can't render children into it anyway
+        // so we show the panel straight away. If we can render, we hide it
+        // first and wait for the DOMContentLoaded event to fire before showing
+        // the panel to avoid a flash of content that's missing the React
+        // portal.
+        show: isCrossOrigin,
+      });
+
+      if (!isCrossOrigin) {
+        // This promise will never resolve if the panel isn't on the same origin.
+        // We skip the `await` if that's the case.
+        await newPanel.DOMContentLoadedPromise;
+        if (show) {
+          newPanel.show();
+        }
+      }
+
+      setPanel(newPanel);
+      return newPanel;
+    }
+
+    const panelPromise = run();
+
+    return () => {
+      panelPromise.then((panel) => {
+        panel?.destroy().then(() => {
+          setPanel(undefined);
+        });
+      });
+    };
+    // We intentionally exclude `height` and `show` from the dependency array so
+    // that we update them later via methods instead of by re-creating the
+    // entire panel from scratch each time.
+    //
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url, box, conversationId]);
+
+  useEffect(() => {
+    panel?.setHeight(height);
+  }, [panel, height]);
+
+  useEffect(() => {
+    if (show) {
+      panel?.show();
+    } else {
+      panel?.hide();
+    }
+  }, [panel, show]);
+
+  const shouldRender = !isCrossOrigin && panel && children;
+
+  return (
+    <>{shouldRender && createPortal(children, panel.window.document.body)}</>
+  );
+}
diff --git a/lib/MountedBox.tsx b/lib/MountedBox.tsx
index 5a7f81f..592b7ad 100644
--- a/lib/MountedBox.tsx
+++ b/lib/MountedBox.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode, useRef } from "react";
+import React, { CSSProperties, ReactNode, useRef } from "react";
 import type Talk from "talkjs";
 import { EventListeners } from "./EventListeners";
 import { useMountBox } from "./hooks";
@@ -11,6 +11,7 @@ interface Props {
   className?: string;
 
   handlers: Record<`on${string}`, Func>;
+  children?: React.ReactNode;
 }
 
 /**
@@ -18,7 +19,7 @@ interface Props {
  * `loadingComponent` fallback until the mount is complete.
  */
 export function MountedBox(props: Props & { session: Talk.Session }) {
-  const { box, loadingComponent, className, handlers } = props;
+  const { box, loadingComponent, className, children, handlers } = props;
 
   const ref = useRef<HTMLDivElement>(null);
   const mounted = useMountBox(box, ref.current);
@@ -26,7 +27,7 @@ export function MountedBox(props: Props & { session: Talk.Session }) {
   const style = mounted ? props.style : { ...props.style, display: "none" };
 
   return (
-    <>
+    <BoxContext.Provider value={box}>
       {!mounted && (
         <div style={props.style} className={className}>
           {loadingComponent}
@@ -34,8 +35,13 @@ export function MountedBox(props: Props & { session: Talk.Session }) {
       )}
 
       <div ref={ref} style={style} className={className} />
+      {children}
 
       <EventListeners target={box} handlers={handlers} />
-    </>
+    </BoxContext.Provider>
   );
 }
+
+export const BoxContext = React.createContext<Talk.UIBox | undefined>(
+  undefined,
+);
diff --git a/lib/Session.tsx b/lib/Session.tsx
index 3c16be0..51af3ef 100644
--- a/lib/Session.tsx
+++ b/lib/Session.tsx
@@ -39,14 +39,21 @@ export function Session(props: SessionProps) {
     Talk.ready.then(() => markReady(true));
   }, []);
 
-  useEffect(() => {
-    if (ready) {
-      const me =
-        typeof syncUser === "function"
-          ? syncUser()
-          : syncUser ?? new Talk.User(userId);
+  const me = ready
+    ? typeof syncUser === "function"
+      ? syncUser()
+      : syncUser ?? new Talk.User(userId)
+    : null;
 
-      const session = new Talk.Session({ appId, me, token, tokenFetcher, signature });
+  useEffect(() => {
+    if (me) {
+      const session = new Talk.Session({
+        appId,
+        me,
+        token,
+        tokenFetcher,
+        signature,
+      });
       setSession(session);
       if (sessionRef) {
         sessionRef.current = session;
@@ -65,7 +72,21 @@ export function Session(props: SessionProps) {
         }
       };
     }
-  }, [ready, signature, appId, userId, syncUser, sessionRef]);
+    // We intentionally add `me?.id` to the dependency array here instead of
+    // just `me`, because `me` is an object so a shallow comparison will always
+    // return `false`.
+    //
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    ready,
+    signature,
+    appId,
+    userId,
+    me?.id,
+    token,
+    tokenFetcher,
+    sessionRef,
+  ]);
 
   useMethod(
     session,
diff --git a/lib/main.tsx b/lib/main.tsx
index 6320f4e..222d897 100644
--- a/lib/main.tsx
+++ b/lib/main.tsx
@@ -4,3 +4,4 @@ export { Chatbox } from "./ui/Chatbox";
 export { Inbox } from "./ui/Inbox";
 export { Popup } from "./ui/Popup";
 export { useSession, useUnreads } from "./SessionContext";
+export { HtmlPanel } from "./HtmlPanel";
diff --git a/lib/ui/Chatbox.tsx b/lib/ui/Chatbox.tsx
index b32a4fd..90a59f4 100644
--- a/lib/ui/Chatbox.tsx
+++ b/lib/ui/Chatbox.tsx
@@ -1,7 +1,11 @@
-import { CSSProperties, ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import type Talk from "talkjs";
 import { useSession } from "../SessionContext";
-import { getKeyForObject, splitObjectByPrefix } from "../util";
+import {
+  validateChildrenAreHtmlPanels,
+  getKeyForObject,
+  splitObjectByPrefix,
+} from "../util";
 import { useMethod, useConversation, useUIBox } from "../hooks";
 import { FirstParameter, UIBoxProps } from "../types";
 import { MountedBox } from "../MountedBox";
@@ -13,11 +17,18 @@ type ChatboxProps = UIBoxProps<Talk.Chatbox> &
     loadingComponent?: ReactNode;
     style?: CSSProperties;
     className?: string;
+    children?: React.ReactNode;
   };
 
 export function Chatbox(props: ChatboxProps) {
   const session = useSession();
 
+  if (!validateChildrenAreHtmlPanels(props.children)) {
+    throw new Error(
+      "<Chatbox> may only have <HtmlPanel> components as direct children.",
+    );
+  }
+
   if (session) {
     const key = getKeyForObject(session);
     return <ActiveChatbox key={key} session={session} {...props} />;
@@ -40,6 +51,7 @@ function ActiveChatbox(props: ChatboxProps & { session: Talk.Session }) {
     style,
     className,
     loadingComponent,
+    children,
     ...optionsAndEvents
   } = props;
 
@@ -61,6 +73,7 @@ function ActiveChatbox(props: ChatboxProps & { session: Talk.Session }) {
       style={style}
       loadingComponent={loadingComponent}
       handlers={events}
+      children={children}
     />
   );
 }
diff --git a/lib/ui/Inbox.tsx b/lib/ui/Inbox.tsx
index b0b10ef..b4c4799 100644
--- a/lib/ui/Inbox.tsx
+++ b/lib/ui/Inbox.tsx
@@ -1,7 +1,11 @@
 import { CSSProperties, ReactNode } from "react";
 import type Talk from "talkjs";
 import { useSession } from "../SessionContext";
-import { getKeyForObject, splitObjectByPrefix } from "../util";
+import {
+  getKeyForObject,
+  splitObjectByPrefix,
+  validateChildrenAreHtmlPanels,
+} from "../util";
 import { useMethod, useConversation, useUIBox } from "../hooks";
 import { FirstParameter, UIBoxProps } from "../types";
 import { MountedBox } from "../MountedBox";
@@ -13,11 +17,18 @@ type InboxProps = Partial<UIBoxProps<Talk.Inbox>> &
     loadingComponent?: ReactNode;
     style?: CSSProperties;
     className?: string;
+    children?: React.ReactNode;
   };
 
 export function Inbox(props: InboxProps) {
   const session = useSession();
 
+  if (!validateChildrenAreHtmlPanels(props.children)) {
+    throw new Error(
+      "<Inbox> may only have <HtmlPanel> components as direct children.",
+    );
+  }
+
   if (session) {
     const key = getKeyForObject(session);
     return <ActiveInbox key={key} session={session} {...props} />;
@@ -40,6 +51,7 @@ function ActiveInbox(props: InboxProps & { session: Talk.Session }) {
     style,
     className,
     loadingComponent,
+    children,
     ...optionsAndEvents
   } = props;
 
@@ -67,6 +79,7 @@ function ActiveInbox(props: InboxProps & { session: Talk.Session }) {
       style={style}
       loadingComponent={loadingComponent}
       handlers={events}
+      children={children}
     />
   );
 }
diff --git a/lib/ui/Popup.tsx b/lib/ui/Popup.tsx
index ef39d74..69ce876 100644
--- a/lib/ui/Popup.tsx
+++ b/lib/ui/Popup.tsx
@@ -1,9 +1,14 @@
 import Talk from "talkjs";
 import { useSession } from "../SessionContext";
-import { getKeyForObject, splitObjectByPrefix } from "../util";
+import {
+  getKeyForObject,
+  splitObjectByPrefix,
+  validateChildrenAreHtmlPanels,
+} from "../util";
 import { useMethod, useConversation, useUIBox, useMountBox } from "../hooks";
 import { EventListeners } from "../EventListeners";
 import { UIBoxProps } from "../types";
+import { BoxContext } from "../MountedBox";
 import { useEffect } from "react";
 
 type PopupProps = UIBoxProps<Talk.Popup> &
@@ -11,11 +16,18 @@ type PopupProps = UIBoxProps<Talk.Popup> &
     highlightedWords?: Parameters<Talk.Popup["setHighlightedWords"]>[0];
     popupRef?: React.MutableRefObject<Talk.Popup | undefined>;
     show?: boolean;
+    children?: React.ReactNode;
   };
 
 export function Popup(props: PopupProps) {
   const session = useSession();
 
+  if (!validateChildrenAreHtmlPanels(props.children)) {
+    throw new Error(
+      "<Popup> may only have <HtmlPanel> components as direct children.",
+    );
+  }
+
   if (session) {
     const key = getKeyForObject(session);
     return <ActivePopup key={key} session={session} {...props} />;
@@ -31,6 +43,7 @@ function ActivePopup(props: PopupProps & { session: Talk.Session }) {
     asGuest,
     show,
     popupRef,
+    children,
     ...optionsAndEvents
   } = props;
 
@@ -58,5 +71,10 @@ function ActivePopup(props: PopupProps & { session: Talk.Session }) {
 
   }, [show, mounted, box])
 
-  return <EventListeners target={box} handlers={events} />;
+  return (
+    <BoxContext.Provider value={box}>
+      {children}
+      <EventListeners target={box} handlers={events} />
+    </BoxContext.Provider>
+  );
 }
diff --git a/lib/util.ts b/lib/util.ts
index b9f5de5..b1a849d 100644
--- a/lib/util.ts
+++ b/lib/util.ts
@@ -1,3 +1,6 @@
+import React from "react";
+import { HtmlPanel } from "./HtmlPanel";
+
 export type Func = (...args: any) => any;
 
 export interface Mountable {
@@ -63,3 +66,24 @@ export function splitObjectByPrefix<P extends string, T extends object>(
   }
   return [prefixed, unprefixed];
 }
+
+const REACT_FRAGMENT_TYPE = React.createElement(React.Fragment).type;
+export function validateChildrenAreHtmlPanels(
+  children?: React.ReactNode,
+): boolean {
+  if (!children) return true;
+
+  return React.Children.toArray(children).every((x) => {
+    if (typeof x !== "object") return false;
+
+    const type = (x as any).type;
+    if (type === HtmlPanel) {
+      return true;
+    }
+    if (type === REACT_FRAGMENT_TYPE) {
+      return validateChildrenAreHtmlPanels((x as any).props.children);
+    }
+
+    return false;
+  });
+}
diff --git a/package.json b/package.json
index 2f53613..eb17c6e 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "url": "https://github.com/talkjs/talkjs-react/issues"
   },
   "homepage": "https://talkjs.com",
-  "version": "0.1.9",
+  "version": "0.1.9-beta.1",
   "type": "module",
   "files": [
     "dist"