diff --git a/prebuilt-ui/chat-overlay/README.md b/prebuilt-ui/chat-overlay/README.md
new file mode 100644
index 0000000..25e7ca1
--- /dev/null
+++ b/prebuilt-ui/chat-overlay/README.md
@@ -0,0 +1,17 @@
+# Chat overlay
+
+
+
+## What does this demo do?
+
+- Adds full-screen [Daily Prebuilt](https://www.daily.co/prebuilt) to a page
+- Using [`app-message`](https://docs.daily.co/reference#app-message) and [`sendAppMessage()`](https://docs.daily.co/reference#%EF%B8%8F-sendappmessage), send and receive chat messages (with or without `enable_chat` set to `true` in the room)
+- Allow users to send and receive chat messages while viewing other participants' videos
+
+### Getting started
+
+- Clone this repository and navigate to this folder (`git clone git@github.com:daily-demos/examples.git && cd prebuilt-ui/chat-overlay`)
+- Set `ROOM_URL` on the first line of `main.js` to a Daily room you have created. Sign up and create a room from the [Daily dashboard](https://dashboard.daily.co/signup), if you haven't already!
+- Run a server from this repo's directory. You can use something like `python -m SimpleHTTPServer` run on the command line in the repo's directory or use VSCode's Live Server extension. See [How do you set up a local testing server?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server) for more info.
+- Register for a Daily.co account and create a Room [in the dashboard](https://dashboard.daily.co/rooms), and use that room URL on this page. You can join that room directly using other browser tabs or another device.
+- Visit the server in your browser! You can use multiple tabs for testing out the chat experience.
diff --git a/prebuilt-ui/chat-overlay/image.jpg b/prebuilt-ui/chat-overlay/image.jpg
new file mode 100644
index 0000000..a99b565
Binary files /dev/null and b/prebuilt-ui/chat-overlay/image.jpg differ
diff --git a/prebuilt-ui/chat-overlay/index.html b/prebuilt-ui/chat-overlay/index.html
new file mode 100644
index 0000000..880118b
--- /dev/null
+++ b/prebuilt-ui/chat-overlay/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ fullscreen embedded prebuilt with chat overlay
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/prebuilt-ui/chat-overlay/main.css b/prebuilt-ui/chat-overlay/main.css
new file mode 100644
index 0000000..4e76acd
--- /dev/null
+++ b/prebuilt-ui/chat-overlay/main.css
@@ -0,0 +1,61 @@
+#chatBox {
+ position: fixed;
+ bottom: 0;
+ z-index: 1000;
+ padding-left: 1.75em;
+ margin-bottom: 7.5em;
+ }
+
+ @media (min-width: 701px) {
+ #chatBox {
+ padding-left: 0;
+ }
+ }
+
+ @media (min-width: 801px) {
+ #chatBox {
+ margin-bottom: 4em;
+ }
+ }
+
+ #chatBox > input {
+ border: 1px solid #c8d1dc;
+ border-radius: 5px;
+ width: 74vw;
+ max-width: 22em;
+ background-color: rgba(255, 255, 255)
+ }
+
+ #chatBoxButton {
+ border: 1px solid #c8d1dc;
+ border-radius: 4px;
+ background-color: rgba(255, 255, 255);
+ }
+
+ #chatBoxTexts > p {
+ background-color: #121a2478;
+ display: table;
+ padding: 0.1em;
+ margin: 0;
+ color: white;
+ font-family: monospace;
+ font-size: 1.25em;
+ border-radius: 0.5em;
+ word-wrap: break-word;
+ animation: fadeIn .5s cubic-bezier(.95,.05,.8,.04) forwards, fadeOut 15s cubic-bezier(.95,.05,.8,.04) forwards;
+ }
+
+ .hidden {
+ visibility: hidden;
+ display: none;
+ }
+
+ @keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+ }
+
+ @keyframes fadeOut {
+ from { opacity: 1; }
+ to { opacity: 0; }
+ }
\ No newline at end of file
diff --git a/prebuilt-ui/chat-overlay/main.js b/prebuilt-ui/chat-overlay/main.js
new file mode 100644
index 0000000..249cf2d
--- /dev/null
+++ b/prebuilt-ui/chat-overlay/main.js
@@ -0,0 +1,45 @@
+const ROOM_URL = "https://acb.daily.co/no-chat"
+
+async function setup() {
+ callFrame = DailyIframe.createFrame({
+ url: ROOM_URL,
+ showLeaveButton: true,
+ iframeStyle: {
+ position: 'fixed',
+ border: 0,
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ },
+ });
+ await callFrame.join();
+ document.getElementById("chatBox").classList.remove('hidden');
+ addChatBox()
+}
+
+function addChatMsg(event) {
+ const chatMsg = document.createElement("p");
+ chatMsg.innerText = (`${callFrame.participants()[event.fromId].user_name }: ${ event.data.message}`)
+ document.getElementById("chatBoxTexts").appendChild(chatMsg)
+}
+
+function addChatBox() {
+ callFrame.on("app-message", (event) => addChatMsg(event))
+}
+
+document.getElementById("chatBox").addEventListener("keyup", (event) => {
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ document.getElementById("chatBoxButton").click();
+ }
+});
+
+document.getElementById("chatBoxButton").addEventListener("click", () => {
+ let inputVal = document.getElementById("chatBoxInput").value;
+ callFrame.sendAppMessage({ message: inputVal }, '*');
+ const chatMsg = document.createElement("p");
+ chatMsg.innerText = (`${callFrame.participants().local.user_name }: ${ inputVal }`);
+ document.getElementById("chatBoxTexts").appendChild(chatMsg);
+ document.getElementById("chatBoxInput").value = "";
+})
\ No newline at end of file