Abrir el chat desde un enlace o botón propio

Además de la burbuja del chat en la esquina, sus visitantes pueden abrir el chat desde un enlace o botón de su sitio web, por ejemplo «Ayuda y soporte» en la barra lateral o «Pregunta sobre mi plan» en su página de precios. La ventana del chat se abre justo al lado de ese elemento.

No necesita código adicional: basta el código de inserción habitual de Insertar el widget. También encontrará un ejemplo para copiar en Proyecto → Inserción → Abrir el chat desde un enlace propio de su cuenta.

El caso más sencillo

Un enlace que apunte a #rc-open:

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

O un botón con el atributo data-rc-open:

<button type="button" data-rc-open>Open chat</button>

data-rc-open funciona en cualquier elemento, no solo en botones. Además de #rc-open, el widget acepta #reactive-chat como destino de enlace.

El clic cuenta aunque el widget todavía no haya terminado de cargar: la ventana se abre en cuanto está listo.

Dónde aparece la ventana

• A la derecha del elemento si hay espacio suficiente; en caso contrario, a su izquierda. La parte superior de la ventana se alinea con el elemento.
• Siempre completamente visible: la ventana se mantiene dentro del área visible y sigue al elemento al desplazarse por la página o cambiar el tamaño de la ventana del navegador.
• En pantallas estrechas (menos de 480 píxeles de ancho, es decir, la mayoría de los teléfonos), el chat se abre a pantalla completa como de costumbre. Allí no hay espacio junto al elemento.
• Como panel lateral: si la ventana del chat está configurada como panel lateral de altura completa en Aspecto, se abre allí y no junto al elemento.
• Si el chat ya está abierto, la ventana se desplaza al último enlace pulsado.
• Al cerrar el chat (también con la tecla Escape), el foco del teclado vuelve al enlace o botón que lo abrió.

Para abrir la ventana en su posición habitual en la esquina, escriba data-rc-open="corner". data-rc-anchor="none" hace lo mismo:

<button type="button" data-rc-open="corner">Open chat</button>

Prerrellenar el campo de mensaje

Con data-rc-message, una frase ya aparece en el campo de mensaje al abrir el chat. No se envía: el visitante puede ampliarla, cambiarla o borrarla y la envía personalmente.

<button type="button" data-rc-open data-rc-message="I have a question about my plan">
  Question about my plan
</button>

Se utilizan hasta 200 caracteres. Para ello, el chat cambia a la pestaña de conversación.

Elegir una pestaña

Si su chat tiene varias pestañas, data-rc-tab decide cuál aparece en primer plano al abrirlo:

• msg – la conversación,
• home – la página de inicio,
• help – los artículos de ayuda.

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

Si su chat no tiene la pestaña indicada (por ejemplo, help sin artículos de ayuda), se abre simplemente como de costumbre.

Abrir desde su propio JavaScript

Las mismas opciones están disponibles como llamada. anchor es el elemento junto al que debe aparecer la ventana; message y tab son opcionales:

document.querySelector('#my-button').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'I have a question about my plan',
    tab: 'msg'
  });
});

Sin anchor, la ventana se abre en su posición habitual. ReactiveChat('open') sin opciones se comporta como antes. Si el propio elemento incluye data-rc-message o data-rc-tab, también se aplican a la llamada; lo que transmita expresamente en ella tiene prioridad.

Si su código puede ejecutarse antes de que se haya cargado el código de inserción, añada esta línea antes. Las llamadas se ponen en cola y se ejecutan en cuanto el widget está listo:

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

Sin burbuja de chat

Si el chat solo debe ser accesible mediante sus propios enlaces, por ejemplo «Ayuda y soporte» en la barra lateral, hay dos vías.

En su cuenta: en Proyecto → Aspecto → Marca, establezca Visualización en Solo mediante sus propios enlaces (sin icono de chat) y guarde. El ajuste surte efecto sin cambiar su sitio web. Aun así, vuelva a copiar después el código de inserción de Proyecto → Instalación: el nuevo ya no incluye el color de su marca, para que el icono de chat no aparezca brevemente al cargar 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 de que el visitante acepte las cookies, el icono seguirá apareciendo como medida de seguridad para mantener accesible el chat.

En el código de inserción: si el icono no debe aparecer nunca, oculte la burbuja del chat con data-rc-hide-launcher="true" en el código de inserción. Este atributo se aplica siempre, con independencia de lo configurado en su cuenta:

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

Asegúrese entonces de que todas las páginas donde los visitantes deban acceder al chat tengan al menos uno de estos enlaces.

Solución de problemas

• Al pulsar solo se añade #rc-open a la dirección: el widget no está insertado en esta página o no se ha cargado (por ejemplo, sin consentimiento). Compruebe que esté el código de inserción.
• La ventana se abre en la esquina en lugar de junto al enlace: ¿tiene el elemento data-rc-open="corner" o data-rc-anchor="none"? ¿La ventana del navegador tiene menos de 480 píxeles de ancho? ¿Está configurada la ventana del chat como panel lateral?
• El texto no aparece en el campo de mensaje: el atributo se llama data-rc-message y debe estar en el propio elemento pulsado.

Los demás ajustes del código de inserción se describen en Insertar el widget. La tarjeta promocional en el chat explica cómo mostrar una tarjeta de su propia oferta dentro del chat.

Más información en la documentación

En detalle: Referencia de la etiqueta de script y API de JavaScript. Todos los capítulos están en la documentación.