widget: single-bubble home screen for chat+whatsapp both mode

app/static/widget.js

@@ -58,6 +58,8 @@
       speak: "Hablar por voz",
       listening: "Escuchando\u2026",
       micDenied: "Permiso de micr\u00f3fono denegado",
+      homeTitle: "\u00bfC\u00f3mo prefieres escribirnos?",
+      homeChat: "Chatear aqu\u00ed", homeWa: "Seguir por WhatsApp",
       starters: ["\u00bfQu\u00e9 ofrec\u00e9is?", "Quiero m\u00e1s informaci\u00f3n", "Hablar con una persona"]
     },
     en: {
@@ -89,6 +91,8 @@
       speak: "Speak",
       listening: "Listening\u2026",
       micDenied: "Microphone permission denied",
+      homeTitle: "How would you like to talk to us?",
+      homeChat: "Chat here", homeWa: "Continue on WhatsApp",
       starters: ["What do you offer?", "I want more information", "Talk to a person"]
     },
     fr: {
@@ -120,6 +124,8 @@
       speak: "Parler",
       listening: "\u00c9coute\u2026",
       micDenied: "Acc\u00e8s au microphone refus\u00e9",
+      homeTitle: "Comment pr\u00e9f\u00e9rez-vous nous \u00e9crire ?",
+      homeChat: "Discuter ici", homeWa: "Continuer sur WhatsApp",
       starters: ["Que proposez-vous ?", "Je souhaite plus d'informations", "Parler \u00e0 une personne"]
     },
     de: {
@@ -151,6 +157,8 @@
       speak: "Sprechen",
       listening: "H\u00f6re zu\u2026",
       micDenied: "Mikrofonzugriff verweigert",
+      homeTitle: "Wie m\u00f6chten Sie uns schreiben?",
+      homeChat: "Hier chatten", homeWa: "Weiter auf WhatsApp",
       starters: ["Was bieten Sie an?", "Ich m\u00f6chte mehr Informationen", "Mit einer Person sprechen"]
     },
     it: {
@@ -182,6 +190,8 @@
       speak: "Parla",
       listening: "In ascolto\u2026",
       micDenied: "Accesso al microfono negato",
+      homeTitle: "Come preferisci scriverci?",
+      homeChat: "Chatta qui", homeWa: "Continua su WhatsApp",
       starters: ["Cosa offrite?", "Vorrei maggiori informazioni", "Parlare con una persona"]
     },
     pt: {
@@ -213,6 +223,8 @@
       speak: "Falar",
       listening: "A ouvir\u2026",
       micDenied: "Permiss\u00e3o de microfone negada",
+      homeTitle: "Como prefere falar connosco?",
+      homeChat: "Conversar aqui", homeWa: "Continuar no WhatsApp",
       starters: ["O que oferecem?", "Quero mais informa\u00e7\u00f5es", "Falar com uma pessoa"]
     }
   };
@@ -301,6 +313,14 @@
       "#ssb-wa.solo{bottom:20px;right:20px;width:auto;height:60px;border-radius:30px;padding:0 22px 0 18px;box-shadow:0 8px 24px rgba(37,211,102,.45)}" +
       "#ssb-wa.solo svg{width:30px;height:30px}" +
       "#ssb-wa .ssb-wa-lbl{color:#fff;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-weight:700;font-size:15px}" +
+      "#ssb-home{padding:20px 16px;display:flex;flex-direction:column;gap:10px;flex:1;justify-content:center}" +
+      "#ssb-home .ssb-home-title{font:inherit;font-size:14.5px;color:#555;text-align:center;margin-bottom:6px}" +
+      ".ssb-home-btn{display:flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;padding:14px 16px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;border:none;transition:transform .15s}" +
+      ".ssb-home-btn:hover{transform:scale(1.02)}" +
+      ".ssb-home-btn svg{width:20px;height:20px;flex:none;fill:#fff}" +
+      ".ssb-home-btn-chat{background:" + c + ";color:#fff}" +
+      ".ssb-home-btn-wa{background:#25D366;color:#fff}" +
+      "#ssb-chatarea{display:flex;flex-direction:column;flex:1;min-height:0}" +
       "@keyframes ssbpulse{0%{box-shadow:0 0 0 0 " + c + "66}70%{box-shadow:0 0 0 16px " + c + "00}100%{box-shadow:0 0 0 0 " + c + "00}}" +
       "#ssb-panel{position:fixed;bottom:20px;right:20px;width:380px;max-width:94vw;height:600px;max-height:80vh;background:#fff;border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.3);display:none;flex-direction:column;overflow:hidden;z-index:99999;font-family:system-ui,-apple-system,Segoe UI,sans-serif;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .22s,transform .22s}" +
       "#ssb-panel.open{display:flex;opacity:1;transform:none}" +
@@ -396,13 +416,18 @@
     // Embed mode chosen by the store: "chat" | "whatsapp" | "both".
     var mode = cfg.widget_mode || "chat";
     var waDigits = cfg.whatsapp_number ? String(cfg.whatsapp_number).replace(/[^0-9]/g, "") : "";
-    var showWa = (mode === "whatsapp" || mode === "both") && waDigits;
     var wantChat = (mode === "chat" || mode === "both");
-    var showChat = wantChat || !showWa;  // always show something (fallback to chat)
+    var hasWa = (mode === "whatsapp" || mode === "both") && waDigits;
+    // "both" with a real WhatsApp number -> ONE bubble that opens a home screen
+    // where the visitor picks the channel, instead of two separate floating
+    // launchers. "whatsapp"-only keeps the standalone floating WA button.
+    var showHome = mode === "both" && hasWa;
+    var showWaStandalone = hasWa && !showHome;
+    var showChat = wantChat || !hasWa;  // always show something (fallback to chat)
 
     // WhatsApp launcher: direct link to wa.me. "solo" = primary spot when it's
     // the only launcher; otherwise it sits stacked above the chat bubble.
-    if (showWa) {
+    if (showWaStandalone) {
       var wab = document.createElement("a");
       wab.id = "ssb-wa";
       if (!showChat) wab.className = "solo";
@@ -419,6 +444,16 @@
     launch.id = "ssb-launch"; launch.setAttribute("aria-label", T.open);
     launch.innerHTML = '<span class="ssb-pulse"></span>' + ICON_AGENT + '<span class="ssb-dot"></span><span class="ssb-badge"></span>';
 
+    // "both" mode: a home screen inside the panel lets the visitor pick chat vs
+    // WhatsApp, instead of two separate floating buttons on the page.
+    var homeHtml = showHome
+      ? '<div id="ssb-home"><div class="ssb-home-title">' + esc(T.homeTitle) + '</div>' +
+        '<button id="ssb-home-chat" type="button" class="ssb-home-btn ssb-home-btn-chat">' +
+        ICON_AGENT + '<span>' + esc(T.homeChat) + '</span></button>' +
+        '<button id="ssb-home-wa" type="button" class="ssb-home-btn ssb-home-btn-wa">' +
+        ICON_WA + '<span>' + esc(T.homeWa) + '</span></button></div>'
+      : '';
+
     var panel = document.createElement("div");
     panel.id = "ssb-panel";
     panel.innerHTML =
@@ -427,6 +462,8 @@
       '<div class="ssb-status"><i></i>' + T.status + '</div></div>' +
       '<button id="ssb-mute" type="button"></button>' +
       '<button class="ssb-x" aria-label="' + T.close + '">&times;</button></div>' +
+      homeHtml +
+      '<div id="ssb-chatarea"' + (showHome ? ' style="display:none"' : '') + '>' +
       '<div id="ssb-msgs"></div>' +
       '<div id="ssb-att"></div>' +
       '<form id="ssb-form">' +
@@ -435,7 +472,7 @@
       '<input id="ssb-input" type="text" autocomplete="off" placeholder="' + T.input + '" />' +
       (HAS_SR ? '<button id="ssb-mic" type="button" aria-label="' + T.speak + '" title="' + T.speak + '">' + ICON_MIC + '</button>' : '') +
       '<button id="ssb-send" type="submit" aria-label="' + T.send + '">' + ICON_SEND + '</button></form>' +
-      '<div id="ssb-foot">' + T.footer + '</div>';
+      '<div id="ssb-foot">' + T.footer + '</div></div>';
 
     document.body.appendChild(launch);
     document.body.appendChild(panel);
@@ -445,6 +482,25 @@
     var form = panel.querySelector("#ssb-form");
     var input = panel.querySelector("#ssb-input");
     var greeted = false;
+    var homeEl = panel.querySelector("#ssb-home");
+    var chatarea = panel.querySelector("#ssb-chatarea");
+
+    // "both" mode: visitor picks a channel on open. Chat -> reveal the normal
+    // chat area (and greet, same as chat-only mode). WhatsApp -> open wa.me;
+    // the panel stays open behind it so they can still switch to chat.
+    function chooseChat() {
+      if (homeEl) homeEl.style.display = "none";
+      if (chatarea) chatarea.style.display = "flex";
+      if (!greeted) { botMsg(cfg.welcome); renderStarters(); greeted = true; }
+      input.focus();
+    }
+    function chooseWa() {
+      window.open("https://wa.me/" + waDigits, "_blank", "noopener");
+    }
+    if (homeEl) {
+      panel.querySelector("#ssb-home-chat").addEventListener("click", chooseChat);
+      panel.querySelector("#ssb-home-wa").addEventListener("click", chooseWa);
+    }
 
     // ---- Visitor uploads (Phase 3): paperclip -> chip -> ids on next send ----
     var attBox = panel.querySelector("#ssb-att");
@@ -744,8 +800,12 @@
       panel.classList.toggle("open");
       if (panel.classList.contains("open")) {
         setBadge(0); stopFlash();
-        if (!greeted) { botMsg(cfg.welcome); renderStarters(); greeted = true; }
-        input.focus();
+        // With a home screen, wait for the visitor to pick a channel before
+        // greeting/focusing the input (avoids a wasted bot turn pre-choice).
+        if (!homeEl) {
+          if (!greeted) { botMsg(cfg.welcome); renderStarters(); greeted = true; }
+          input.focus();
+        }
       }
     }
     launch.addEventListener("click", toggle);

tests/test_widget_assets.py

@@ -17,6 +17,24 @@ def test_widget_js_supports_signed_proxy_mode():
     assert "localStorage" in js
 
 
+def test_widget_both_mode_shows_a_single_bubble_with_channel_picker():
+    """'both' (chat+WhatsApp) must be ONE bubble that opens a home screen letting
+    the visitor pick a channel -- not two separate floating launchers. Verified
+    behaviorally in a real headless browser during development (22/22 assertions:
+    single bubble, no premature greet, correct wa.me resolution, chat/whatsapp-only
+    modes unaffected); this structural test guards the markers that behavior relies
+    on so a future edit can't silently remove them."""
+    js = WIDGET.read_text(encoding="utf-8")
+    assert 'var showHome = mode === "both" && hasWa' in js
+    assert 'var showWaStandalone = hasWa && !showHome' in js
+    assert 'id="ssb-home"' in js and 'id="ssb-chatarea"' in js
+    assert 'id="ssb-home-chat"' in js and 'id="ssb-home-wa"' in js
+    assert "chooseChat" in js and "chooseWa" in js
+    # every language block carries the picker copy (real i18n, not just Spanish)
+    for key in ("homeTitle", "homeChat", "homeWa"):
+        assert js.count(key + ":") == 6, f"{key} must be defined in all 6 languages"
+
+
 def test_block_is_app_embed_loading_widget_in_proxy_mode():
     liquid = BLOCK.read_text(encoding="utf-8")
     assert "{% schema %}" in liquid