Integrar en tu web

Burbuja del asistente

Copia este código y pégalo antes de </body> en tu sitio. Aparecerá una burbuja celeste abajo a la derecha que abre el chat.

  1. Una sola vez, de tu lado: en el dashboard abre Settings → Browser security → iFrame embedding y elige "Any website". Así cualquier cliente puede incrustarlo sin configurar nada.
  2. Vuelve a publicar la app para que el cambio aplique.
  3. Pega el código en tu web.
HTML
<!-- Burbuja del asistente EQUIUM AI -->
<script>
(function () {
  var EMBED_URL = "https://ia-workshop-assistant-copy-78c1bbde.base44.app/embed";
  var ACCENT = "#87CEEB";

  var root = document.createElement("div");
  root.style.cssText = "position:fixed;right:20px;bottom:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;";

  var panel = document.createElement("div");
  panel.style.cssText = "display:none;width:380px;max-width:calc(100vw - 40px);height:560px;max-height:calc(100vh - 140px);border-radius:20px;overflow:hidden;background:#000;border:1px solid rgba(135,206,235,0.35);box-shadow:0 24px 60px rgba(0,0,0,0.5);";

  var frame = document.createElement("iframe");
  frame.setAttribute("title", "Asistente EQUIUM AI");
  frame.setAttribute("allow", "clipboard-write");
  frame.style.cssText = "width:100%;height:100%;border:0;display:block;";
  panel.appendChild(frame);

  var hint = document.createElement("div");
  hint.style.cssText = "display:none;align-items:center;gap:10px;background:#ffffff;color:#0b0b0b;padding:10px 14px;border-radius:16px;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,0.25);";
  hint.innerHTML = "<span>\u00bfTe puedo asistir?</span>";

  var closeHint = document.createElement("span");
  closeHint.textContent = "\u00d7";
  closeHint.style.cssText = "cursor:pointer;color:#8b8f94;font-size:16px;line-height:1;";
  hint.appendChild(closeHint);

  var bubble = document.createElement("button");
  bubble.type = "button";
  bubble.setAttribute("aria-label", "Abrir chat de asistencia");
  bubble.style.cssText = "width:60px;height:60px;border:0;border-radius:50%;cursor:pointer;background:" + ACCENT + ";color:#0b0b0b;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(135,206,235,0.45);transition:transform 0.2s ease;";
  bubble.innerHTML = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>';

  var opened = false;
  var loaded = false;

  function setOpen(next) {
    opened = next;
    panel.style.display = opened ? "block" : "none";
    hint.style.display = "none";
    if (opened && !loaded) {
      frame.src = EMBED_URL;
      loaded = true;
    }
    bubble.setAttribute("aria-label", opened ? "Cerrar chat de asistencia" : "Abrir chat de asistencia");
  }

  bubble.addEventListener("click", function () { setOpen(!opened); });
  closeHint.addEventListener("click", function () { hint.style.display = "none"; });

  root.appendChild(panel);
  root.appendChild(hint);
  root.appendChild(bubble);
  document.body.appendChild(root);

  setTimeout(function () {
    if (!opened) hint.style.display = "flex";
  }, 2500);
})();
</script>