Skip to content

Instantly share code, notes, and snippets.

@steig

steig/olark-chat-button-mockup.html

Last active January 8, 2026 18:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save steig/3f9dbb9db437934ea98b61734374bf93 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save steig/3f9dbb9db437934ea98b61734374bf93 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Olark Chat Button Mockup - Spotlight Tab Style
Raw
olark-chat-button-mockup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Olark Chat Button - UX Demo</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
min-height: 100vh;
padding: 40px;
}
.page-content {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
margin-bottom: 20px;
color: #333;
}
p {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
}
.controls {
position: fixed;
top: 20px;
left: 20px;
background: white;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
z-index: 100;
font-size: 14px;
}
.controls h4 {
margin-bottom: 10px;
font-size: 12px;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.controls button {
display: block;
width: 100%;
padding: 8px 12px;
margin-bottom: 8px;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
cursor: pointer;
font-size: 13px;
text-align: left;
}
.controls button:hover {
background: #f5f5f5;
}
.controls button.active {
background: #1a1a1a;
color: white;
border-color: #1a1a1a;
}
/* Custom Chat Button - Spotlight Tab Style */
.custom-chat-button {
position: fixed;
top: 50%;
right: -44px;
transform: rotate(90deg);
transform-origin: center center;
width: 130px;
height: 44px;
padding: 0 20px;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 9999;
border-radius: 0 0 8px 8px;
background: #1a1a1a;
color: white;
}
.custom-chat-button:hover {
filter: brightness(1.2);
}
.custom-chat-button.offline {
background: #6b7280;
}
.custom-chat-button .online-indicator {
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50%;
flex-shrink: 0;
position: relative;
}
.custom-chat-button .online-indicator::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.custom-chat-button.offline .online-indicator {
display: none;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(2);
opacity: 0;
}
}
/* Simulated Chat Window - Black Theme */
.chat-window {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%) scale(0.95);
width: 380px;
height: 500px;
background: #1a1a1a;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 10000;
overflow: hidden;
}
.chat-window.open {
opacity: 1;
visibility: visible;
transform: translateY(-50%) scale(1);
}
.chat-header {
padding: 16px 20px;
background: #1a1a1a;
border-bottom: 1px solid #333;
display: flex;
align-items: center;
justify-content: space-between;
}
.chat-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.chat-avatar {
width: 36px;
height: 36px;
background: #333;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #888;
font-size: 18px;
}
.chat-header-info h3 {
color: white;
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
}
.chat-header-info span {
color: #22c55e;
font-size: 12px;
}
.chat-close {
background: none;
border: none;
color: #888;
cursor: pointer;
font-size: 24px;
padding: 0;
line-height: 1;
}
.chat-close:hover {
color: white;
}
.chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
background: #111;
}
.chat-message {
margin-bottom: 16px;
}
.chat-message.agent {
display: flex;
gap: 10px;
}
.chat-message.agent .avatar {
width: 28px;
height: 28px;
background: #333;
border-radius: 50%;
flex-shrink: 0;
}
.chat-message .bubble {
background: #2a2a2a;
color: white;
padding: 10px 14px;
border-radius: 12px;
font-size: 14px;
line-height: 1.4;
max-width: 80%;
}
.chat-message.user {
display: flex;
justify-content: flex-end;
}
.chat-message.user .bubble {
background: #3b82f6;
}
.chat-input-area {
padding: 16px;
background: #1a1a1a;
border-top: 1px solid #333;
}
.chat-input {
width: 100%;
padding: 12px 16px;
background: #111;
border: 1px solid #333;
border-radius: 24px;
color: white;
font-size: 14px;
outline: none;
}
.chat-input::placeholder {
color: #666;
}
.chat-input:focus {
border-color: #555;
}
/* Offline chat window */
.chat-window.offline .chat-header-info span {
color: #888;
}
.chat-window.offline .chat-messages {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #888;
}
.offline-message h4 {
color: white;
margin-bottom: 8px;
}
.offline-message p {
color: #888;
font-size: 14px;
margin-bottom: 16px;
}
.offline-message input {
width: 100%;
padding: 10px 14px;
background: #2a2a2a;
border: 1px solid #333;
border-radius: 6px;
color: white;
font-size: 14px;
margin-bottom: 8px;
}
.offline-message button {
width: 100%;
padding: 10px 14px;
background: white;
color: #1a1a1a;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Control Panel -->
<div class="controls">
<h4>Demo Controls</h4>
<button onclick="setOnline()" class="active" id="btn-online">Operators Online</button>
<button onclick="setOffline()" id="btn-offline">Operators Offline</button>
</div>
<!-- Page Content -->
<div class="page-content">
<h1>Custom Olark Chat Button - UX Demo</h1>
<p><strong>This simulates the full chat experience.</strong> Click the tab on the right to open the chat window.</p>
<p>The chat window appears vertically centered on the right side, aligned with the button - no awkward slide-up from the bottom corner.</p>
<p>Use the controls on the left to toggle between online/offline states and see how the UX changes.</p>
<hr style="margin: 20px 0; border: none; border-top: 1px solid #eee;">
<p><strong>Implementation notes:</strong></p>
<ul style="margin-left: 20px; color: #666;">
<li>Black theme (#1a1a1a) for chat window</li>
<li>Vertically centered positioning via CSS override</li>
<li>Custom button triggers <code>olark('api.box.expand')</code></li>
<li>Operator status via <code>onOperatorsAvailable</code> / <code>onOperatorsAway</code></li>
</ul>
</div>
<!-- Custom Chat Button -->
<button class="custom-chat-button" id="customChatButton" onclick="toggleChat()">
<span class="online-indicator"></span>
<span class="text">Chat Now</span>
</button>
<!-- Simulated Chat Window - Online State -->
<div class="chat-window" id="chatWindow">
<div class="chat-header">
<div class="chat-header-left">
<div class="chat-avatar">S</div>
<div class="chat-header-info">
<h3>Support Team</h3>
<span id="statusText">Online now</span>
</div>
</div>
<button class="chat-close" onclick="toggleChat()">&times;</button>
</div>
<div class="chat-messages" id="chatMessages">
<div class="chat-message agent">
<div class="avatar"></div>
<div class="bubble">Hi there! How can we help you today?</div>
</div>
</div>
<div class="chat-input-area">
<input type="text" class="chat-input" placeholder="Type a message...">
</div>
</div>
<script>
let isOnline = true;
let isOpen = false;
function toggleChat() {
isOpen = !isOpen;
document.getElementById('chatWindow').classList.toggle('open', isOpen);
}
function setOnline() {
isOnline = true;
document.getElementById('btn-online').classList.add('active');
document.getElementById('btn-offline').classList.remove('active');
document.getElementById('customChatButton').classList.remove('offline');
document.getElementById('customChatButton').querySelector('.text').textContent = 'Chat Now';
document.getElementById('chatWindow').classList.remove('offline');
document.getElementById('statusText').textContent = 'Online now';
document.getElementById('chatMessages').innerHTML = `
<div class="chat-message agent">
<div class="avatar"></div>
<div class="bubble">Hi there! How can we help you today?</div>
</div>
`;
}
function setOffline() {
isOnline = false;
document.getElementById('btn-offline').classList.add('active');
document.getElementById('btn-online').classList.remove('active');
document.getElementById('customChatButton').classList.add('offline');
document.getElementById('customChatButton').querySelector('.text').textContent = 'Need Help?';
document.getElementById('chatWindow').classList.add('offline');
document.getElementById('statusText').textContent = 'Away';
document.getElementById('chatMessages').innerHTML = `
<div class="offline-message">
<h4>We're currently offline</h4>
<p>Leave us a message and we'll get back to you!</p>
<input type="email" placeholder="Your email">
<input type="text" placeholder="Your message">
<button>Send Message</button>
</div>
`;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment