Day 06 of 07

Make it work on mobile and handle edge cases

Goal: Your chatbot works on desktop. Today you make it work better on phones and handle slow connections without leaving people confused.

What to do

Test on your phone right now

Open your Netlify URL on your phone's browser. Look for common mobile problems: the chat window is too tall and gets cut off by the keyboard, the button is hidden behind browser controls, text is too small to read, or the send button is hard to tap.

Add mobile fixes and the thinking animation to chatbot.css

Open chatbot.css and add this block at the very end of the file:

/* Mobile fixes */
@media (max-width: 480px) {
  #chatbot-window {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    height: 65vh;
  }

  #chatbot-button {
    bottom: 16px;
    right: 16px;
  }
}

/* Thinking animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.thinking {
  animation: pulse 1.2s ease-in-out infinite;
  font-style: italic;
  color: #64748b;
}

Update the sendMessage function in chatbot.js

Open chatbot.js. Replace only the sendMessage function, and keep the rest of the file identical. Use this version, which adds the animation class and a 15-second timeout:

async function sendMessage() {
  const text = chatInput.value.trim()
  if (!text || chatSend.disabled) return

  addMessage(text, 'user')
  chatInput.value = ''
  chatSend.disabled = true

  const thinking = addMessage('Thinking...', 'bot')
  thinking.classList.add('thinking')

  const timeout = setTimeout(() => {
    thinking.classList.remove('thinking')
    thinking.textContent = 'Sorry, this is taking longer than usual. Please try again.'
    chatSend.disabled = false
  }, 15000)

  try {
    const res = await fetch('/.netlify/functions/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: text }),
    })

    clearTimeout(timeout)
    const data = await res.json()
    thinking.classList.remove('thinking')
    thinking.textContent = data.reply || 'Sorry, I could not get a response. Please try again.'
  } catch {
    clearTimeout(timeout)
    thinking.classList.remove('thinking')
    thinking.textContent = 'Sorry, something went wrong. Please try again.'
  } finally {
    chatSend.disabled = false
    chatInput.focus()
  }
}

Commit, push, and test on both desktop and mobile

Commit both files, chatbot.css and chatbot.js. Push and wait for deploy. Test on your desktop browser and your phone. Confirm the thinking animation appears when you send a message and disappears when Claude replies.

Expected result

Your chatbot works on desktop and mobile. On small screens the chat window slides up from the bottom. There is a pulsing loading animation and a friendly timeout fallback.

Key takeaway

Most visitors arrive on a phone. A chatbot that only works on desktop is not finished.

Day 5 Day 7