55 lines
1.5 KiB
PHP
55 lines
1.5 KiB
PHP
<style>
|
|
#chat-floating-btn {
|
|
position: fixed;
|
|
right: 25px;
|
|
bottom: 25px;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background: #0078d4;
|
|
color: white;
|
|
font-size: 26px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
|
z-index: 9999;
|
|
}
|
|
|
|
#chat-widget-container {
|
|
position: fixed;
|
|
right: 25px;
|
|
bottom: 100px;
|
|
width: 420px;
|
|
height: 600px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
display: none;
|
|
z-index: 9999;
|
|
}
|
|
|
|
#chat-widget-container iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
</style>
|
|
<div id="chat-floating-btn">💬</div>
|
|
<!-- Chat Popup -->
|
|
<div id="chat-widget-container"><iframe src="http://localhost:3000/chat"></iframe></div>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const chatBtn = document.getElementById("chat-floating-btn");
|
|
const chatWidget = document.getElementById("chat-widget-container");
|
|
chatBtn.addEventListener("click", function () {
|
|
if (chatWidget.style.display === "none" || chatWidget.style.display === "") {
|
|
chatWidget.style.display = "block";
|
|
} else {
|
|
chatWidget.style.display = "none";
|
|
}
|
|
});
|
|
});
|
|
</script> |