widget_embed.html

<style>
  #cb-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    cursor: pointer;
    font-size: 26px;
    color: white;
    box-shadow: 0 4px 20px rgba(102,126,234,0.5);
    z-index: 9999;
    transition: transform 0.2s;
  }
  #cb-toggle-btn:hover { transform: scale(1.1); }
  #cb-widget {
    display: none;
    flex-direction: column;
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 360px;
    height: 520px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    z-index: 9998;
    overflow: hidden;
  }
  #cb-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #cb-header .avatar { width:36px;height:36px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px; }
  #cb-header .info h3 { font-size:14px;font-weight:600; }
  #cb-header .info p { font-size:11px;opacity:0.8; }
  #cb-status-dot { width:8px;height:8px;background:#4ade80;border-radius:50%;margin-left:auto; }
  #cb-messages { flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#f8f9fb; }
  .cb-msg { max-width:80%;padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.5;animation:cbFade 0.2s ease; }
  @keyframes cbFade { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none} }
  .cb-msg.bot { background:white;color:#333;border-bottom-left-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,0.08);align-self:flex-start; }
  .cb-msg.user { background:linear-gradient(135deg,#667eea,#764ba2);color:white;border-bottom-right-radius:4px;align-self:flex-end; }
  .cb-msg.typing { background:white;color:#999;font-style:italic;border-bottom-left-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,0.08);align-self:flex-start; }
  #cb-quick-replies { display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;background:#f8f9fb; }
  .cb-quick-btn { background:white;border:1.5px solid #667eea;color:#667eea;border-radius:20px;padding:5px 12px;font-size:12px;cursor:pointer;transition:all 0.2s; }
  .cb-quick-btn:hover { background:#667eea;color:white; }
  #cb-input-area { display:flex;padding:10px 12px;gap:8px;border-top:1px solid #eee;background:white; }
  #cb-input { flex:1;border:1.5px solid #e0e0e0;border-radius:24px;padding:8px 16px;font-size:13.5px;outline:none;transition:border-color 0.2s; }
  #cb-input:focus { border-color:#667eea; }
  #cb-send-btn { width:38px;height:38px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;cursor:pointer;color:white;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
</style>

<!-- Toggle Button -->
<button id="cb-toggle-btn" onclick="cbToggle()" title="Chat with us">💬</button>

<!-- Widget Panel -->
<div id="cb-widget">
  <div id="cb-header">
    <div class="avatar">🤖</div>
    <div class="info">
      <h3>Support Bot</h3>
      <p>Ask me about our services</p>
    </div>
    <div id="cb-status-dot"></div>
  </div>
  <div id="cb-messages"></div>
  <div id="cb-quick-replies">
    <button class="cb-quick-btn" onclick="cbSendQuick('What services do you offer?')">Services</button>
    <button class="cb-quick-btn" onclick="cbSendQuick('What are your prices?')">Pricing</button>
    <button class="cb-quick-btn" onclick="cbSendQuick('How can I contact you?')">Contact</button>
    <button class="cb-quick-btn" onclick="cbSendQuick('How long does a project take?')">Timeline</button>
  </div>
  <div id="cb-input-area">
    <input id="cb-input" type="text" placeholder="Type your question..." autocomplete="off" />
    <button id="cb-send-btn" onclick="cbSend()">➤</button>
  </div>
</div>

<script>
  // ── CHANGE THIS to your deployed backend URL ──────────────────────
  const CB_API_URL = 'https://sanjay8013-ai-robot.hf.space/chat';
  // ─────────────────────────────────────────────────────────────────

  let cbOpen = false, cbTypingEl = null;

  function cbToggle() {
    cbOpen = !cbOpen;
    document.getElementById('cb-widget').style.display = cbOpen ? 'flex' : 'none';
    document.getElementById('cb-toggle-btn').textContent = cbOpen ? '✕' : '💬';
    if (cbOpen && !document.getElementById('cb-messages').children.length) {
      cbAddMsg('Hello! 👋 How can I help you today?', 'bot');
    }
    if (cbOpen) document.getElementById('cb-input').focus();
  }

  function cbAddMsg(text, type) {
    const msgs = document.getElementById('cb-messages');
    const div = document.createElement('div');
    div.className = 'cb-msg ' + type;
    div.textContent = text;
    msgs.appendChild(div);
    msgs.scrollTop = msgs.scrollHeight;
    return div;
  }

  function cbSendQuick(msg) {
    document.getElementById('cb-input').value = msg;
    cbSend();
  }

  function cbSend() {
    const input = document.getElementById('cb-input');
    const msg = input.value.trim();
    if (!msg) return;
    cbAddMsg(msg, 'user');
    input.value = '';
    cbTypingEl = cbAddMsg('Thinking...', 'typing');
    document.getElementById('cb-quick-replies').style.display = 'none';

    fetch(CB_API_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: msg })
    })
    .then(r => r.json())
    .then(d => { if(cbTypingEl){cbTypingEl.remove();cbTypingEl=null;} cbAddMsg(d.reply || 'Sorry, something went wrong.', 'bot'); })
    .catch(() => { if(cbTypingEl){cbTypingEl.remove();cbTypingEl=null;} cbAddMsg('Connection error. Please try again.', 'bot'); });
  }

  document.getElementById('cb-input').addEventListener('keypress', e => { if(e.key==='Enter') cbSend(); });
</script>