El botón del chat: forma, tamaño, icono, rótulo y posición

El botón del chat es el botón situado en la esquina inferior con el que los visitantes abren el chat. Puede configurarlo en /app/projects/{id}, pestaña Aspecto, sección Marca. Una vista previa en vivo, Este es su botón del chat, muestra cada cambio de inmediato. Guarde con Guardar; los visitantes reciben el cambio en menos de un minuto.

El color del botón del chat es su color primario; véase Colores, fuente y tema.

Plantillas para el botón del chat

20 combinaciones listas para usar, por ejemplo «Asistente virtual – Responde en 2 min», «¿Tiene alguna pregunta?», «Atención al cliente – Lun–vie 8–18 h» o «Asistente de IA – Responde en segundos». Un clic rellena la forma, el icono, el rótulo, la segunda línea, la visualización y el tamaño. Sus colores se mantienen; no se guarda nada hasta que pulse Guardar. Después, ajuste los textos.

Los campos

• Forma – círculo (predeterminada), redondeado, cuadrado, bocadillo u hoja. En el bocadillo, una esquina puntiaguda mira hacia la esquina de la pantalla. En la hoja, dos esquinas opuestas son pequeñas.
• Tamaño (px) – de 44 a 72, predeterminado 56. 44 es el área más pequeña que todavía se puede pulsar de forma fiable.
• Tamaño en teléfonos (px) – de 40 a 72. Vacío significa 48 px, o menos si el tamaño anterior es menor.
• Icono – bocadillo (predeterminado), signo de interrogación, auriculares, destello o sin icono (solo texto). Sin icono, el botón del chat necesita un rótulo y la visualización siempre. De lo contrario, el widget muestra el bocadillo.
• Rótulo – texto visible junto al icono, con un máximo de 40 caracteres. Vacío significa que solo se muestra el icono.
• Segunda línea – una segunda línea más pequeña debajo del rótulo, con un máximo de 60 caracteres. Sin rótulo, permanece invisible.
• Visualización – cuándo es visible el rótulo:
• siempre (predeterminada),
• solo al pasar el cursor – solo el icono; el rótulo se despliega al pasar el cursor o al recibir el foco del teclado. En dispositivos táctiles solo se muestra el icono.
• solo en pantallas grandes – el rótulo solo aparece a partir de 481 px de ancho; por debajo, solo el icono,
• Solo mediante sus propios enlaces (sin icono de chat) – no hay botón del chat; véase más abajo.

Rótulo por idioma

El rótulo y la segunda línea del formulario se aplican en todos los idiomas. Si desea que sean distintos según el idioma, introdúzcalos en Textos y formularios → Textos propios con las claves launcher.text y launcher.subtext. Una entrada allí tiene prioridad sobre los campos de aquí. Más información en Textos e idiomas.

Chat sin botón del chat

Con la visualización Solo mediante sus propios enlaces (sin icono de chat), no aparece ningún botón del chat. Los visitantes abren el chat desde sus propios enlaces o botones:

<a href="#rc-open">Help & support</a>

Incluya al menos un enlace así en cada página donde el chat deba ser accesible. Después, vuelva a copiar el código de inserción de Instalación: el nuevo ya no incluye el color de su marca, para que el botón del chat no aparezca brevemente durante la carga de la página.

Mientras el widget no haya podido obtener su ajuste del servidor, por ejemplo sin conexión o en una primera visita antes del consentimiento de cookies, el botón del chat seguirá apareciendo como medida de seguridad. Si no debe aparecer nunca, añada también lo siguiente al código de inserción:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        async></script>

data-rc-hide-launcher se aplica siempre, con independencia de lo configurado en su cuenta. Sin botón del chat tampoco hay burbujas de tooltip en él. Todas las formas de abrir el chat desde sus propios elementos, con texto prerrellenado y selección de pestaña, se describen en Abrir el chat desde un enlace o botón propio.

En lugar de un enlace, también puede convertir un elemento existente de su página en el disparador. data-rc-launcher-selector acepta un selector CSS:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        data-rc-launcher-selector="#hilfe-knopf"
        async></script>

Posición y separación

El lado, la separación y el nivel de apilamiento se establecen en el código de inserción. Su cuenta no dispone de campos para ellos.

• data-rc-position – right (predeterminado) o left.
• data-rc-offset – distancia al borde en píxeles, como JSON; predeterminado {"x":20,"y":20}. El widget añade las áreas seguras, como la muesca del iPhone.
• data-rc-z-index – nivel de apilamiento; predeterminado 2147483000. Redúzcalo si un elemento propio debe situarse por encima del chat.

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-position="left"
        data-rc-offset='{"x":24,"y":96}'
        async></script>

Los mismos campos también funcionan como position, offset y zIndex mediante window.ReactiveChatSettings o ReactiveChat('boot', …). Véase Integración técnica.

Evitar barras

Si su página tiene una barra fija en el borde inferior, como un banner de cookies, una barra del carrito o una barra de navegación en teléfonos, el botón del chat se desplaza automáticamente por encima, con 12 px de separación. Vuelve a medir cuando cambia la página. Los elementos que ocupan más del 40 % de la altura de la ventana se consideran superposiciones. No los evita.

Puede desactivarlo en el código de inserción:

data-rc-avoid-overlap="false"

Botón del chat con un icono propio

Puede utilizar un icono completamente personalizado mediante código, a través de la marca: launcher.icon acepta un SVG en línea o una dirección data: y tiene prioridad sobre el icono seleccionado.

ReactiveChat('setBrand', {
  launcher: { shape: 'bubble', label: 'Ask us', icon: 'data:image/svg+xml,…' }
});

Tenga en cuenta que una marca con estos campos en el código de inserción (data-rc-brand) tiene prioridad sobre los ajustes de su cuenta en esta página. Véase Colores, fuente y tema.

En teléfonos

Por debajo de 481 px de ancho (y en teléfonos en horizontal con hasta 480 px de alto), se aplica el tamaño para teléfonos. Con la visualización solo en pantallas grandes, el botón del chat solo muestra allí el icono. Cuando el visitante abre el chat, la ventana ocupa toda la pantalla y el botón del chat pasa a segundo plano.

Si el botón del chat no tiene el aspecto esperado

• No se ve el botón del chat: ¿está la visualización en Solo mediante sus propios enlaces o se ha establecido data-rc-hide-launcher="true" en el código de inserción? ¿Está pausado el proyecto?
• El botón del chat aparece aunque esté configurado «Solo mediante sus propios enlaces»: el widget todavía no ha recibido el ajuste del servidor (alternativa de respaldo). Añada también data-rc-hide-launcher="true".
• Aparece el bocadillo incluso sin icono: sin icono necesita un rótulo y la visualización siempre.
• Los cambios no llegan: ¿hay un data-rc-brand en el código de inserción con un rótulo, un icono u otros campos adicionales? En ese caso, prevalece el código de inserción.