What is The Cosmos?
A physical exploration?
A metaphorical journey?
A scientific perspective?
A sense of wonder and awe?
Not even close! Just a nerdy space made by some nerdy guy with too much time on his hands intrigued by fellow creative people making websites. So, I decided
I wanted to bring those people together in some way, and here we are. I made a global chat widget that I host that allows websites to be interconnected,
maybe even form some type of community who knows. I'm interested to see where it goes; and to see how other people react to it.
A screenshot of the chat:
How it works
- Click the 💬 icon in the bottom right hand corner to open/close the chat.
- Visitors are auto-connected as guests — no login needed. But you can login to reserve your name and advertise your website.
- New messages show a purple dot notification when the widget is closed...also it gets all cool and glowy.
Features
- Custom actions! (Example: /me runs around the room)
- A quick command to see who's online. (Example: /who)
- A live experience (IRC Style) where chat isn't saved to a database. (Totally for privacy and totally not for the reason that I didn't want a bunch of chats filling up my database.)
Embed Code
Copy and paste the code in the box below and add it in right before your </BODY> tag.
I even took the time to thoroughly label it so you can customize it to fit your site. :)
<!-- Chat Widget Embed -->
<style>
/* CHAT TOGGLE BUTTON: change the size, colors, shadow, etc. */
#chatToggle {
position: fixed;
bottom: 20px; /* distance from bottom */
right: 20px; /* distance from right */
width: 50px; /* button size */
height: 50px;
font-size: 28px; /* icon size */
background: #111; /* background color */
color: #0ff; /* icon color */
border: 2px solid #0ff; /* border color and thickness */
border-radius: 50%; /* make the button round (0–50%) */
cursor: pointer;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 10px #0ff; /* glow shadow */
user-select: none;
transition:
box-shadow 1.5s ease-in-out,
border-color 1.5s ease-in-out,
color 1.5s ease-in-out; /* hover/animation timing */
}
/* PULSE GLOW: customize colors, timing */
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 0 15px 4px #a020f0; /* color and spread (of the glow) */
border-color: #a020f0;
color: #d580ff;
}
50% {
box-shadow: 0 0 25px 8px #d580ff;
border-color: #d580ff;
color: #f0a0ff;
}
}
/* APPLY PULSE WHEN NEW MESSAGE APPEARS: change class name or timing */
#chatToggle.newMsg {
animation: pulseGlow 3s infinite; /* duration and how often it repeats */
}
/* NEW MESSAGE DOT: tweak size, position, colors */
#newMsgDot {
position: absolute;
top: 8px; /* position inside toggle */
right: 8px; /* position inside toggle */
width: 12px; /* dot size */
height: 12px;
background: #a020f0; /* dot color (if you can't tell I like purple) :) */
border-radius: 50%;
display: none;
z-index: 10001;
animation: pulse 2s infinite; /* dot pulse timing */
}
/* DOT PULSE KEYFRAMES: change shadow spread & timing */
@keyframes pulse {
0%, 100% { box-shadow: 0 0 6px #a020f0; }
50% { box-shadow: 0 0 14px #d580ff; }
}
/* IFRAME WINDOW: size, position, shadow, background */
#chatFrame {
position: fixed;
bottom: 80px; /* space from button */
right: 20px; /* align with button */
width: 350px; /* chat window width */
height: 500px; /* chat window height */
border: none;
z-index: 9999;
display: none;
box-shadow: 0 0 10px #0ff; /* window glow */
background: #000; /* window background */
transition: right 0.3s ease, transform 0.3s ease; /* timing */
}
/* MOBILE RESPONSIVENESS */
@media (max-width: 600px) {
#chatToggle {
right: 50% !important; /* center horizontally */
transform: translateX(50%); /* adjust centering */
}
#chatFrame {
right: 50% !important;
transform: translateX(50%);
}
}
</style>
<div id="chatToggle" tabindex="0">
<div style="position: relative;">
💬
<span id="newMsgDot"></span>
</div>
</div>
<iframe
id="chatFrame"
src="https://cosmos.pcdomain.com/embed.html"
allow="clipboard-write"></iframe>
<script>
(function(){
const toggle = document.getElementById("chatToggle");
const frame = document.getElementById("chatFrame");
const dot = document.getElementById("newMsgDot");
let isOpen = false;
/* Show/hide the purple pulse and dot */
function showNewMessageAlert() {
dot.style.display = "block";
toggle.classList.add("newMsg");
}
function hideNewMessageAlert() {
dot.style.display = "none";
toggle.classList.remove("newMsg");
}
/* TOGGLE CLICK — change display method or animation */
toggle.addEventListener("click", () => {
isOpen = !isOpen;
frame.style.display = isOpen ? "block" : "none";
if (isOpen) hideNewMessageAlert();
});
/* LISTEN FOR FRAME MESSAGES — origin and data */
window.addEventListener("message", (event) => {
if (event.origin !== "https://cosmos.pcdomain.com") return;
if (event.data === "new-message" && !isOpen) {
showNewMessageAlert();
}
});
})();
</script>
