שיחת וואטסאפ בטלפון

הדרך המהירה ביותר להסביר שירות בלי פסקת טקסט. זה רכיב תצוגה: הבועות כתובות מראש, אין מנוע ואין חיבור לשום שירות. כדי לכתוב שיחה משלכם, השתמשו בכלי "בונה שיחת וואטסאפ". שיחת וואטסאפ בטלפון הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · וואטסאפ · בלי ספריות · שיווק

<!-- שיחת וואטסאפ מונפשת — תצוגה שיווקית בלבד, הבועות כתובות מראש -->
<div class="klix-chat" dir="rtl">
  <div class="klix-chat-frame">
    <span class="klix-chat-notch"></span>
    <div class="klix-chat-screen">
      <div class="klix-chat-head">
        <span class="klix-chat-avatar">ש</span>
        <span class="klix-chat-title"><b>שירות לקוחות</b><i>מחובר</i></span>
      </div>
      <div class="klix-chat-body" id="klix-chat-body"></div>
    </div>
  </div>
</div>

<style>
.klix-chat { position: relative; margin: 0 auto; width: 300px; max-width: 100%;
  font-family: inherit; direction: rtl }
.klix-chat-frame { position: relative; border-radius: 40px; background: #1a1a1a; padding: 10px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.5) }
.klix-chat-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 7rem; height: 1.5rem; background: #1a1a1a; border-radius: 0 0 1rem 1rem }
.klix-chat-screen { border-radius: 32px; overflow: hidden; background: #e5ddd5 }
.klix-chat-head { display: flex; align-items: center; gap: .75rem; background: #075E54; color: #fff;
  padding: 1.75rem 1rem .75rem }
.klix-chat-avatar { width: 2.25rem; height: 2.25rem; border-radius: 999px; flex-shrink: 0;
  background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .875rem }
.klix-chat-title { display: flex; flex-direction: column; min-width: 0 }
.klix-chat-title b { font-size: .875rem }
.klix-chat-title i { font-style: normal; font-size: .625rem; color: rgba(255,255,255,.7) }
.klix-chat-body { height: 380px; overflow-y: auto; padding: .75rem; display: flex;
  flex-direction: column; gap: .5rem; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8b89a' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") }
.klix-chat-row { display: flex; animation: klix-chat-in .35s ease-out }
.klix-chat-row.user { justify-content: flex-start }
.klix-chat-row.business { justify-content: flex-end }
.klix-chat-bubble { max-width: 85%; padding: .5rem .75rem; border-radius: .75rem;
  font-size: .8125rem; line-height: 1.6; color: #111b21; box-shadow: 0 1px 2px rgba(0,0,0,.12) }
.klix-chat-row.user .klix-chat-bubble { background: #DCF8C6; border-top-left-radius: .15rem }
.klix-chat-row.business .klix-chat-bubble { background: #ffffff; border-top-right-radius: .15rem }
.klix-chat-time { display: block; margin-top: .15rem; text-align: left; font-size: .5625rem;
  color: #9ca3af }
.klix-chat-typing { background: #ffffff; border-radius: .75rem; padding: .6rem 1rem;
  display: flex; gap: .25rem; box-shadow: 0 1px 2px rgba(0,0,0,.12) }
.klix-chat-typing span { width: .5rem; height: .5rem; border-radius: 999px; background: #9ca3af;
  animation: klix-chat-dot .9s ease-in-out infinite }
.klix-chat-typing span:nth-child(2) { animation-delay: .15s }
.klix-chat-typing span:nth-child(3) { animation-delay: .3s }
@keyframes klix-chat-in { from { opacity: 0; transform: translateY(16px) scale(.9) } }
@keyframes klix-chat-dot { 50% { transform: translateY(-.3rem) } }
</style>

<script>
(function () {
  // ═══ ערכו כאן ═══
  var BUBBLES = [
    { from: 'user', text: 'היי, אפשר לקבל פרטים על השירות?' },
    { from: 'business', text: 'בטח! על איזה תאריך מדובר וכמה אנשים?' },
    { from: 'user', text: 'ב-14 בחודש, בערך 120 אורחים' },
    { from: 'business', text: 'מעולה. נשלח לכל אורח לינק אישי לאישור הגעה, ונרכז לכם את התשובות במקום אחד' }
  ];
  var TYPING = true;      // אנימציית "מקליד" לפני כל בועה
  var LOOP = true;        // התחלה מחדש בסוף
  var SPEED = 1;       // מכפיל מהירות
  // ═════════════════

  var box = document.getElementById('klix-chat-body');
  if (!box || !BUBBLES.length) return;

  var time = new Date().toLocaleTimeString('he-IL', { hour: '2-digit', minute: '2-digit' });
  var shown = 0, typing = null;

  function addTyping(from) {
    var row = document.createElement('div');
    row.className = 'klix-chat-row ' + from;
    var t = document.createElement('div');
    t.className = 'klix-chat-typing';
    for (var i = 0; i < 3; i++) t.appendChild(document.createElement('span'));
    row.appendChild(t);
    box.appendChild(row);
    return row;
  }

  function addBubble(b) {
    var row = document.createElement('div');
    row.className = 'klix-chat-row ' + b.from;
    var bubble = document.createElement('div');
    bubble.className = 'klix-chat-bubble';
    bubble.textContent = b.text;
    var stamp = document.createElement('span');
    stamp.className = 'klix-chat-time';
    stamp.textContent = time;
    bubble.appendChild(stamp);
    row.appendChild(bubble);
    box.appendChild(row);
  }

  function scroll() { box.scrollTo({ top: box.scrollHeight, behavior: 'smooth' }); }

  function step() {
    if (typing) { typing.remove(); typing = null; }

    if (shown >= BUBBLES.length) {
      if (!LOOP) return;
      // התחלה מחדש, כדי שגם מי שהגיע באיחור יראה את השיחה
      setTimeout(function () { box.innerHTML = ''; shown = 0; step(); }, 4000 / SPEED);
      return;
    }

    addBubble(BUBBLES[shown]);
    shown++;
    scroll();

    if (shown < BUBBLES.length && TYPING) {
      typing = addTyping(BUBBLES[shown].from);
      scroll();
    }

    // השהיה ארוכה יותר אחרי בועה של העסק, כדי שייראה כאילו האדם קורא לפני שהוא עונה
    var delay = (BUBBLES[shown - 1].from === 'business' ? 1800 : 1200) / SPEED;
    setTimeout(step, delay);
  }

  setTimeout(step, 800 / SPEED);
})();
</script>