Updated broader README and moved Header to shared component

custom/text-chat/public/components/Header/Header.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Header = ({ demoTitle, repoLink }) => (
+  <header className="header">
+    <div className="row">
+      <img src="daily-logo.svg" alt="Daily" className="logo" />
+      <div className="demoTitle">{demoTitle}</div>
+    </div>
+    <div className="row">
+      <div className="capsule">
+        <a
+          href="https://docs.daily.co/docs/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          API docs
+        </a>
+      </div>
+      <span className="divider" />
+      <a href={repoLink} target="_blank" rel="noopener noreferrer">
+        <img src="github-logo.png" alt="Ocotocat" className="logo octocat" />
+      </a>
+    </div>
+    <style jsx>{`
+      .header {
+        display: flex;
+        flex: 0 0 auto;
+        padding: var(--spacing-sm);
+        align-items: center;
+        width: 100%;
+        justify-content: space-between;
+      }
+
+      .row {
+        display: flex;
+        align-items: center;
+      }
+
+      .logo {
+        margin-right: var(--spacing-xs);
+      }
+
+      .octocat {
+        width: 24px;
+        height: 24px;
+        margin-left: var(--spacing-xxs);
+      }
+
+      .demoTitle,
+      .capsule {
+        color: var(--text-reverse);
+        line-height: 1;
+        font-weight: var(--weight-medium);
+      }
+
+      .capsule {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-xxxs);
+        background-color: var(--blue-dark);
+        border-radius: var(--radius-sm);
+        padding: var(--spacing-xxs) var(--spacing-xs);
+        box-sizing: border-box;
+        user-select: none;
+        margin-right: var(--spacing-xxs);
+      }
+
+      .capsule a {
+        text-decoration: none;
+        color: var(--text-reverse);
+      }
+
+      .divider {
+        background: var(--gray-light);
+        margin: 0 var(--spacing-xxs);
+        height: 32px;
+        width: 1px;
+      }
+
+      @media only screen and (max-width: 750px) {
+        .demoTitle {
+          display: none;
+        }
+      }
+    `}</style>
+  </header>
+);
+
+Header.propTypes = {
+  demoTitle: PropTypes.string,
+  repoLink: PropTypes.string,
+};
+
+export default Header;

custom/text-chat/public/components/Header/index.js

@@ -0,0 +1 @@
+export { Header as default } from './Header';

prebuilt-ui/README.md

@@ -8,6 +8,12 @@ These examples demonstrate how to customise and extend the prebuilt UI.
 
 ## Examples
 
+### [✅ Basic embed](./basic-embed)
+Embeds [Daily Prebuilt](https://docs.daily.co/prebuilt), a ready-to-use video chat interface, into a Next.js app. 
+
+### [💬 Chat overlay](./chat-overlay)
+Uses the Daily [sendAppMessage()](https://docs.daily.co/reference/daily-js/instance-methods/send-app-message#main) method to add a custom chat around a Daily Prebuilt call. 
+
 ### [🤙 iOS WebView](./ios-webview)
 
 Shows how to wrap the prebuilt UI in a native iOS application (using WKWebView)