formha/templates/z_comps/boton_chat.html

<style>
  .floating-btn {
    position: fixed;
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: move; /* Indica que es arrastrable */
    user-select: none; /* Evita selección de texto al arrastrar */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    transition:
      background-color 0.3s,
      left 0.3s ease,
      right 0.3s ease,
      top 0.3s ease;
  }

  .floating-btn:active {
    cursor: grabbing; /* Cambia el cursor mientras se arrastra */
  }
</style>


<div class="floating-btn border border-light shadow-lg" id="floatingBtn">
  <a id="floatingBtnLink" target="_blank" href="https://chatgpt.com/g/g-6828126fba608191a2803ac89f54f504-formha-rh-para-pymes">
    <img src="../../static/y_img/logos/chat_ia_formha.png" alt="logo" style="width: 100%; height: 100%;">
  </a>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const btn = document.getElementById('floatingBtn');
  const link = document.getElementById('floatingBtnLink');
  let offsetX, offsetY;
  let isDragging = false;
  let hasMoved = false;
  let startClientX, startClientY;
  const moveThreshold = 10;

  // Cargar posición guardada
  const savedPosition = localStorage.getItem('floatingBtnPosition');
  if (savedPosition) {
    const { x, y } = JSON.parse(savedPosition);
    btn.style.left = x;
    btn.style.top = y;
    requestAnimationFrame(() => stickToNearestSide(parseInt(x), parseInt(y)));
  } else {
    btn.style.right = '20px';
    btn.style.top = '20px';
  }

  // Mouse
  btn.addEventListener('mousedown', startInteraction);
  document.addEventListener('mousemove', moveInteraction);
  document.addEventListener('mouseup', endInteraction);

  // Touch
  btn.addEventListener('touchstart', handleTouchStart, { passive: false });
  btn.addEventListener('touchmove', handleTouchMove, { passive: false });
  btn.addEventListener('touchend', handleTouchEnd, { passive: false });

  link.addEventListener('click', (e) => {
    if (hasMoved) e.preventDefault();
    hasMoved = false;
  });

  function handleTouchStart(e) {
    e.preventDefault();
    const touch = e.touches[0];
    startClientX = touch.clientX;
    startClientY = touch.clientY;

    const rect = btn.getBoundingClientRect();
    offsetX = startClientX - rect.left;
    offsetY = startClientY - rect.top;

    isDragging = false;
    hasMoved = false;
  }

  function handleTouchMove(e) {
    if (!startClientX) return;

    const touch = e.touches[0];
    const currentX = touch.clientX;
    const currentY = touch.clientY;

    const deltaX = Math.abs(currentX - startClientX);
    const deltaY = Math.abs(currentY - startClientY);

    if (deltaX > moveThreshold || deltaY > moveThreshold) {
      isDragging = true;
      hasMoved = true;
      btn.style.left = `${currentX - offsetX}px`;
      btn.style.top = `${currentY - offsetY}px`;
      btn.style.right = 'auto';
      e.preventDefault();
    }
  }

  function handleTouchEnd(e) {
    if (isDragging) {
      const rect = btn.getBoundingClientRect();
      stickToNearestSide(rect.left, rect.top);
      savePosition(rect.left, rect.top);
    } else {
      // Solo si NO se movió, redireccionar manualmente
      if (!hasMoved) {
        window.open(link.href, '_blank');
      }
    }

    startClientX = null;
    startClientY = null;
    isDragging = false;
    hasMoved = false;
  }

  function startInteraction(e) {
    e.preventDefault();
    btn.style.transition = 'none'; // Desactiva transición
    const clientX = e.clientX;
    const clientY = e.clientY;

    startClientX = clientX;
    startClientY = clientY;

    const rect = btn.getBoundingClientRect();
    offsetX = clientX - rect.left;
    offsetY = clientY - rect.top;

    btn.style.left = `${rect.left}px`;
    btn.style.top = `${rect.top}px`;
    btn.style.right = 'auto';
    btn.style.bottom = 'auto';

    btn.style.cursor = 'grabbing';
  }

  function moveInteraction(e) {
    if (!startClientX) return;

    const clientX = e.clientX;
    const clientY = e.clientY;

    const currentX = clientX - offsetX;
    const currentY = clientY - offsetY;

    const deltaX = Math.abs(clientX - startClientX);
    const deltaY = Math.abs(clientY - startClientY);

    if (deltaX > moveThreshold || deltaY > moveThreshold) {
      isDragging = true;
      hasMoved = true;
    }

    if (isDragging) {
      btn.style.left = `${currentX}px`;
      btn.style.top = `${currentY}px`;
      e.preventDefault();
    }
  }

  function endInteraction() {
    startClientX = null;
    startClientY = null;
    btn.style.transition = ''; // Restaura transición CSS

    if (isDragging) {
      isDragging = false;
      btn.style.cursor = 'move';
      const rect = btn.getBoundingClientRect();
      stickToNearestSide(rect.left, rect.top);
      savePosition(rect.left, rect.top);
    }
  }

  function stickToNearestSide(x, y) {
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    const btnWidth = btn.offsetWidth;
    const btnHeight = btn.offsetHeight;
    const padding = 10;

    if (x < windowWidth / 2 - btnWidth / 2) {
      btn.style.left = `${padding}px`;
      btn.style.right = 'auto';
    } else {
      btn.style.left = 'auto';
      btn.style.right = `${padding}px`;
    }

    let newY = y;
    if (y < padding) newY = padding;
    else if (y + btnHeight > windowHeight - padding) newY = windowHeight - btnHeight - padding;
    btn.style.top = `${newY}px`;
  }

  function savePosition(x, y) {
    localStorage.setItem('floatingBtnPosition', JSON.stringify({
      x: btn.style.left,
      y: btn.style.top
    }));
  }

  window.addEventListener('resize', function () {
    const saved = localStorage.getItem('floatingBtnPosition');
    if (saved) {
      const { x, y } = JSON.parse(saved);
      stickToNearestSide(parseInt(x), parseInt(y));
    } else {
      stickToNearestSide(btn.getBoundingClientRect().left, btn.getBoundingClientRect().top);
    }
  });
});
</script>