Skip to content

Instantly share code, notes, and snippets.

@ablwr
Last active July 20, 2021 12:39
Show Gist options
  • Save ablwr/f09e09e474eecb109fb830956f621b26 to your computer and use it in GitHub Desktop.
Save ablwr/f09e09e474eecb109fb830956f621b26 to your computer and use it in GitHub Desktop.
Overlay chat text on Daily Prebuilt
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment