ablwr/overlay-chat.html

## overlay-chat.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fullscreen embedded prebuilt with chat overlay</title>
  <script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
  <style>
    #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; }
    }
  </style>
</head>

<body onload="setup()">
<aside id="chatBox" class="hidden">
  <div id="chatBoxTexts"></div>
  <input id="chatBoxInput" type="text">
  <button id="chatBoxButton">➡️</button>
</aside>
<script>
const ROOM_URL = "YOUR-ROOM-URL-HERE"

function setup() {
  join()
  addChatBox()
}

async function join() {
  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');
}

function addChatMsg(event) {
  let 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.keyCode === 13) {
    event.preventDefault();
    document.getElementById("chatBoxButton").click();
  }
});

document.getElementById("chatBoxButton").addEventListener("click", (event) => {
  callFrame.sendAppMessage({ message: document.getElementById("chatBoxInput").value }, '*');
  let chatMsg = document.createElement("p");
  chatMsg.innerText = (callFrame.participants().local.user_name + ": " + document.getElementById("chatBoxInput").value);
  document.getElementById("chatBoxTexts").appendChild(chatMsg);
  document.getElementById("chatBoxInput").value = "";
})
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>fullscreen embedded prebuilt with chat overlay</title>
	<script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
	<style>
	#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; }
	}
	</style>
	</head>

	<body onload="setup()">
	<aside id="chatBox" class="hidden">
	<div id="chatBoxTexts"></div>
	<input id="chatBoxInput" type="text">
	<button id="chatBoxButton">➡️</button>
	</aside>
	<script>
	const ROOM_URL = "YOUR-ROOM-URL-HERE"

	function setup() {
	join()
	addChatBox()
	}

	async function join() {
	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');
	}

	function addChatMsg(event) {
	let 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.keyCode === 13) {
	event.preventDefault();
	document.getElementById("chatBoxButton").click();
	}
	});

	document.getElementById("chatBoxButton").addEventListener("click", (event) => {
	callFrame.sendAppMessage({ message: document.getElementById("chatBoxInput").value }, '*');
	let chatMsg = document.createElement("p");
	chatMsg.innerText = (callFrame.participants().local.user_name + ": " + document.getElementById("chatBoxInput").value);
	document.getElementById("chatBoxTexts").appendChild(chatMsg);
	document.getElementById("chatBoxInput").value = "";
	})
	</script>
	</body>
	</html>