<html>
<head>
<title>Simple Chat Widget Test</title>
Simple Chat Widget Test Page
This is a test page for the chat widget. Click the chat button in the bottom right corner to open the chat.
<style>
/* Basic styling for the chat widget */
#chat-widget-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
font-family: Arial, sans-serif;
}
.chat-button {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: #4F46E5;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
}
.chat-button:hover {
transform: scale(1.05);
}
.chat-frame {
width: 350px;
height: 500px;
border: none;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
margin-bottom: 15px;
display: none;
}
</style>
</head>
<body>
<h1>Simple Chat Widget Test Page</h1>
<p>This is a test page for the chat widget. Click the chat button in the bottom right corner to open the chat.</p>
<!– Start of Chat Widget –>
<div id=”chat-widget-container”>
<div id=”chat-frame-container”></div>
<div id=”chat-button” class=”chat-button”>
<svg width=”24″ height=”24″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″>
<path d=”M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z”></path>
</svg>
</div>
</div>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
const button = document.getElementById(‘chat-button’);
const frameContainer = document.getElementById(‘chat-frame-container’);
let chatFrame = null;
let chatOpen = false;
// Create chat iframe when button is first clicked (lazy loading)
function createChatFrame() {
if (!chatFrame) {
chatFrame = document.createElement(‘iframe’);
chatFrame.className = ‘chat-frame’;
// This URL should point to your chat page
// Since this is a test, we’re using a placeholder
chatFrame.src = “about:blank”;
frameContainer.appendChild(chatFrame);
// For testing – add content to the iframe
setTimeout(() => {
try {
const frameDoc = chatFrame.contentDocument || chatFrame.contentWindow.document;
frameDoc.body.innerHTML = `
<div style=”padding: 20px; height: 100%; box-sizing: border-box; background-color: #f9f9f9;”>
<div style=”background: white; border-radius: 8px; padding: 15px; height: calc(100% – 30px); display: flex; flex-direction: column;”>
<div style=”font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #eee;”>Chat with AI Assistant</div>
<div style=”flex-grow: 1; overflow-y: auto; padding: 10px 0;”>
<div style=”background: #f0f0f0; padding: 10px; border-radius: 8px; margin-bottom: 10px; max-width: 80%;”>
Hello! How can I help you today?
</div>
</div>
<div style=”padding-top: 10px; border-top: 1px solid #eee;”>
<input type=”text” placeholder=”Type your message…”
style=”width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;”>
</div>
</div>
</div>
`;
} catch (e) {
console.error(“Could not modify iframe content:”, e);
}
}, 100);
}
}
// Toggle chat visibility when button is clicked
button.addEventListener(‘click’, function() {
if (!chatFrame) {
createChatFrame();
}
chatOpen = !chatOpen;
chatFrame.style.display = chatOpen ? ‘block’ : ‘none’;
// Change button icon when chat is open
if (chatOpen) {
button.innerHTML = ‘<svg width=”24″ height=”24″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><line x1=”18″ y1=”6″ x2=”6″ y2=”18″></line><line x1=”6″ y1=”6″ x2=”18″ y2=”18″></line></svg>’;
} else {
button.innerHTML = ‘<svg width=”24″ height=”24″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><path d=”M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z”></path></svg>’;
}
});
});
</script>
<!– End of Chat Widget –>
</body>
