Support Chat Widget
A launcher button that opens a chat panel with auto-replies.
Requires Bootstrap 5. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><div style="max-width:320px">
<div class="card border-0 shadow" id="cwPanel" style="display:none"><div class="card-header bg-primary text-white py-2 small fw-bold d-flex justify-content-between">Support <button class="btn-close btn-close-white btn-sm" id="cwClose"></button></div>
<div class="card-body small" id="cwBody" style="height:140px;overflow:auto"><div class="bg-light rounded p-2 mb-2">Hi! How can we help?</div></div>
<div class="card-footer p-2"><div class="input-group input-group-sm"><input class="form-control" id="cwInput" placeholder="Type…"><button class="btn btn-primary" id="cwSend">→</button></div></div></div>
<button class="btn btn-primary rounded-pill shadow" id="cwOpen">💬 Chat with us</button>
</div>var panel=document.getElementById('cwPanel'),open=document.getElementById('cwOpen'),body=document.getElementById('cwBody'),inp=document.getElementById('cwInput');
open.onclick=function(){panel.style.display='block';open.style.display='none'};
document.getElementById('cwClose').onclick=function(){panel.style.display='none';open.style.display='inline-block'};
function send(){if(!inp.value.trim())return;var m=document.createElement('div');m.className='bg-primary text-white rounded p-2 mb-2 ms-auto';m.style.maxWidth='80%';m.textContent=inp.value;body.appendChild(m);inp.value='';body.scrollTop=body.scrollHeight;setTimeout(function(){var r=document.createElement('div');r.className='bg-light rounded p-2 mb-2';r.textContent='Thanks! An agent will reply soon.';body.appendChild(r);body.scrollTop=body.scrollHeight},700)}
document.getElementById('cwSend').onclick=send;inp.addEventListener('keydown',function(e){if(e.key==='Enter')send()});Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.