El Hover Bubble CTA es un pequeño botón flotante que se coloca en una esquina de la página. Cuando un visitante pasa el ratón por encima (o lo toca en el móvil), se abre una burbuja de mensaje con una o dos llamadas a la acción. Es una forma ligera y poco intrusiva de ofrecer ayuda, una demo, un enlace de reserva o un chat — sin que ningún popup interrumpa a nadie. Tiene dos orientaciones: un botón normal en una esquina, o una pestaña vertical fina pegada al borde izquierdo o derecho. Dónde se coloca en la pantalla se define en el paso Ubicación de la acción.
Cuándo usarlo
- Ayuda en directo o chat — un botón “¿Necesita ayuda?” que abre su widget de chat al hacer clic.
- Reservar una demo o una llamada — abra un popup de reservas o enlace a una página de reservas.
- Pestaña lateral permanente — una pestaña vertical de ayuda o de comentarios fijada a un borde de la pantalla, que no molesta hasta que se pasa el ratón por encima.
Añadirlo a una acción
En una acción Popup, abra el selector de plantillas y elija Hover Bubble CTA. Dé estilo a cualquier elemento haciendo clic en él en la vista previa. Use el paso Ubicación de la acción para colocar el botón, y defina la dirección correspondiente en Placement para que la burbuja no se salga del borde.
Ajustes
Estilo
- Colour Preset — brand, dark, light o blue. Colorea a la vez el botón, la burbuja y los botones de acción.
- Drop Shadow — activada o desactivada.
- Button / Bubble / Title / Text CSS — abre el editor de CSS para sobrescribir el ajuste predefinido en cualquier parte.
Botón
- Orientation — Horizontal es un botón flotante normal en una esquina. Vertical es una pestaña fina pegada al borde izquierdo o derecho, con el texto girado de lado — ideal para una pestaña permanente de ayuda o de comentarios. En modo vertical, la burbuja se abre siempre hacia dentro, lejos del borde, y Button Sits On (en Placement) elige el borde izquierdo o derecho.
- Vertical Icon Position — solo se usa en orientación vertical: coloque el icono arriba de la pestaña con top (encima del texto), abajo con bottom, o elija none para ocultarlo y tener una pestaña solo de texto.
- Shape — pill (el texto junto al icono), circle (solo el icono) o square. Se ignora en orientación vertical, que es siempre una pestaña de borde.
- Size, Icon, Custom Icon Image — una foto de la persona que responde puede convertir mejor que un icono.
- Text Label — opcional; se oculta automáticamente en los móviles para que el botón se convierta en un círculo.
Mensaje y acciones
- Bubble Title and Text — el gancho y una o dos líneas de apoyo.
- First / Second Action — cada una es un botón estándar: elija Open a link para enviar al visitante a una URL, o Run JavaScript para abrir un widget de chat (Intercom, Crisp, HubSpot, Tidio, etc.), un popup de reservas o lanzar un evento.
- Action Look — link, button u outline. Action Icon — un pequeño icono opcional. Las dos acciones van una junto a otra en una línea.
Animación
- Attention Animation — pulse, bounce, wiggle, glow o ring. Se detiene mientras el visitante pasa el ratón por encima, y se desactiva para los visitantes que piden a su sistema reducir el movimiento.
- Open the Bubble by Itself — muestra el mensaje una vez por sí solo después de un tiempo, y luego lo vuelve a ocultar. En los móviles no hay hover, así que déjelo por encima de cero.
Colocación
- Bubble Opens Toward — solo en horizontal: ajústelo a la esquina, de modo que una esquina inferior se abra hacia arriba (Up) y una superior hacia abajo (Down). En orientación vertical la burbuja se abre siempre hacia dentro desde el borde, así que se ignora.
- Button Sits On — alineación con el borde. En orientación vertical, elige el borde izquierdo o derecho al que se fija la pestaña.
- Spacing, Show on Mobile — el espacio alrededor del botón, y si aparece en los móviles.
Comportamiento y cierre
- After an Action is Clicked — Dismiss (en esta vista; vuelve en la página siguiente), Hide for this session, Do not show again (usa la Display Frequency de la acción) o Keep visible.
- What the X Closes — cerrar solo la burbuja (el botón se queda), ocultar en esta vista, ocultar durante esta sesión o no volver a mostrar.
Consejos
- Horizontal: ajuste la dirección de la burbuja a la esquina. Un botón abajo a la derecha debe abrirse hacia arriba (Up) y colocarse a la derecha (Right) para que la burbuja no se salga de la pantalla.
- Vertical: elija el borde con Button Sits On. Right fija la pestaña al borde derecho y abre la burbuja hacia la izquierda; Left hace lo contrario. La dirección de la burbuja es automática.
- Dismiss no es lo mismo que Do Not Show Again. Dismiss oculta el botón en la vista de página actual y vuelve en la página siguiente; Do Not Show Again se rige por la Display Frequency de la acción.
- Para abrir un widget de chat, ponga una acción en Run JavaScript y pegue el comando de apertura del proveedor — por ejemplo, una llamada de una línea que abre Intercom, Crisp, HubSpot o Tidio.
Más información
La posición se define en el paso Ubicación de la acción. Para la diferencia entre descartar una acción y suprimirla durante más tiempo, consulte los ajustes de Display Frequency de su acción.