Bootstrap Floating Chat Widget — Free JS Snippet

<div class="bscw-wrap">
  <div class="card bscw-window d-none" id="bscwWindow">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-2">
      <span class="fw-bold small">Support Chat</span>
      <button type="button" class="btn-close btn-close-white" aria-label="Close" id="bscwClose"></button>
    </div>
    <div class="card-body bscw-body" id="bscwBody">
      <div class="bscw-msg bscw-bot">Hi there! How can we help you today?</div>
    </div>
    <div class="card-footer p-2">
      <form class="d-flex gap-2" id="bscwForm">
        <input type="text" class="form-control form-control-sm" id="bscwInput" placeholder="Type a message..." autocomplete="off">
        <button type="submit" class="btn btn-primary btn-sm">Send</button>
      </form>
    </div>
  </div>

  <button type="button" class="btn btn-primary rounded-circle bscw-launcher" id="bscwLauncher" aria-label="Open chat">
    &#128172;
  </button>
</div>

.bscw-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 1080; }
.bscw-launcher { width: 56px; height: 56px; font-size: 1.4rem; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.bscw-window { width: 320px; max-width: calc(100vw - 40px); position: absolute; bottom: 72px; right: 0; border: 1px solid #eceef1; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.bscw-body { height: 300px; overflow-y: auto; }
.bscw-msg { max-width: 80%; padding: 6px 10px; border-radius: 12px; margin-bottom: 8px; font-size: .9rem; }
.bscw-bot { background: #f1f3f5; }
.bscw-user { background: #0d6efd; color: #fff; margin-left: auto; }

const launcher = document.getElementById('bscwLauncher');
const windowEl = document.getElementById('bscwWindow');
const closeBtn = document.getElementById('bscwClose');
const form = document.getElementById('bscwForm');
const input = document.getElementById('bscwInput');
const body = document.getElementById('bscwBody');

const botReplies = [
  "Thanks for your message! A team member will follow up shortly.",
  "Got it — could you share a bit more detail?",
  "That's a great question. Let me check on that for you.",
  "I've noted that down. Is there anything else you need help with?",
];
let replyIndex = 0;

function scrollToBottom() {
  body.scrollTop = body.scrollHeight;
}

function addMessage(text, sender) {
  const msg = document.createElement('div');
  msg.className = 'bscw-msg ' + (sender === 'user' ? 'bscw-user' : 'bscw-bot');
  msg.textContent = text;
  body.appendChild(msg);
  scrollToBottom();
}

launcher.addEventListener('click', () => {
  windowEl.classList.toggle('d-none');
  if (!windowEl.classList.contains('d-none')) {
    input.focus();
    scrollToBottom();
  }
});

closeBtn.addEventListener('click', () => {
  windowEl.classList.add('d-none');
});

form.addEventListener('submit', e => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;

  addMessage(text, 'user');
  input.value = '';

  // Simulated network/thinking delay before the bot reply appears, so the
  // conversation doesn't feel instantaneous and unrealistic.
  setTimeout(() => {
    const reply = botReplies[replyIndex % botReplies.length];
    replyIndex += 1;
    addMessage(reply, 'bot');
  }, 900);
});