Day 03 of 07

Build the chat widget - button and window

Goal: Today you add the visible part of your chatbot: a floating button in the corner of every page, and a chat window that opens when visitors click it. No AI responses yet. Today is about getting the shell right.

What to do

Create chatbot.css in your project root

In your project folder, the same folder where your index.html lives, create a new file called chatbot.css. Paste all of the following code into it and save:

/* Chatbot widget styles */

#chatbot-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2563eb;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
}

#chatbot-button:hover {
  transform: scale(1.08);
  background: #1d4ed8;
}

#chatbot-window {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 340px;
  max-width: calc(100vw - 48px);
  height: 460px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  z-index: 9998;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}

#chatbot-window.hidden { display: none; }

#chatbot-header {
  background: #2563eb;
  color: white;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#chatbot-close {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

#chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-message {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-message.bot {
  background: #f1f5f9;
  color: #1e293b;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat-message.user {
  background: #2563eb;
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

#chatbot-input-row {
  display: flex;
  padding: 12px;
  gap: 8px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

#chatbot-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  background: white;
}

#chatbot-input:focus { border-color: #2563eb; }

#chatbot-send {
  padding: 10px 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#chatbot-send:hover { background: #1d4ed8; }
#chatbot-send:disabled { opacity: 0.5; cursor: not-allowed; }

Create chatbot.js in your project root

In the same folder, create a new file called chatbot.js. Paste all of this code. It handles the open and close behavior only. The AI connection comes tomorrow:

// Chatbot widget - open/close only (AI connected on Day 4)

const chatButton   = document.getElementById('chatbot-button')
const chatWindow   = document.getElementById('chatbot-window')
const chatClose    = document.getElementById('chatbot-close')
const chatInput    = document.getElementById('chatbot-input')
const chatSend     = document.getElementById('chatbot-send')
const chatMessages = document.getElementById('chatbot-messages')

chatButton.addEventListener('click', () => {
  chatWindow.classList.remove('hidden')
  chatInput.focus()
})

chatClose.addEventListener('click', () => {
  chatWindow.classList.add('hidden')
})

function addMessage(text, role) {
  const msg = document.createElement('div')
  msg.className = 'chat-message ' + role
  msg.textContent = text
  chatMessages.appendChild(msg)
  chatMessages.scrollTop = chatMessages.scrollHeight
  return msg
}

chatSend.addEventListener('click', () => {
  const text = chatInput.value.trim()
  if (!text) return
  addMessage(text, 'user')
  chatInput.value = ''
  addMessage('AI responses coming tomorrow! The widget is working correctly.', 'bot')
})

chatInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') chatSend.click()
})

Add the widget HTML to your index.html

Open index.html. Add the CSS link inside the head section. Add the widget HTML and script tag just before the closing body tag:

<!-- ADD THIS inside <head> (anywhere before </head>) -->
<link rel="stylesheet" href="chatbot.css">

<!-- ADD ALL OF THIS just before </body> -->
<button id="chatbot-button" aria-label="Open chat">&#x1F4AC;</button>

<div id="chatbot-window" class="hidden">
  <div id="chatbot-header">
    <span>Chat with us</span>
    <button id="chatbot-close" aria-label="Close chat">&#x2715;</button>
  </div>
  <div id="chatbot-messages"></div>
  <div id="chatbot-input-row">
    <input id="chatbot-input" type="text" placeholder="Type a message..." maxlength="300" />
    <button id="chatbot-send">Send</button>
  </div>
</div>

<script src="chatbot.js"></script>

Commit, push, and test on your live site

Go to GitHub Desktop. You should see three changed or new files: chatbot.css, chatbot.js, and index.html. Commit message: Add chatbot widget. Commit to main then push origin. Wait for Netlify to deploy. Open your live site and look for the blue chat button in the bottom-right corner.

Expected result

Your live website has a floating blue chat button in the bottom-right corner. Clicking it opens a chat window with an input field and Send button. Clicking X closes it. A placeholder response appears when you send a message.

Key takeaway

The widget is just HTML, CSS, and a little JavaScript. Tomorrow you replace the fake reply with a real Claude response.

Day 2 Day 4