Last active
July 20, 2021 12:39
-
-
Save ablwr/f09e09e474eecb109fb830956f621b26 to your computer and use it in GitHub Desktop.
Overlay chat text on Daily Prebuilt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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