Poner el chat en tu sitio web

El chat del sitio es un botón flotante en una esquina de tu página web. Quien lo pulsa conversa con ELYRA ahí mismo: pide algo, elige en un menú, adjunta un archivo, y si hace falta una persona del equipo entra a la conversación. En el celular el chat ocupa la pantalla entera, como cualquier app de mensajería.

Es el canal más sencillo de conectar. No hay ningún proveedor de por medio: ni cuentas que crear, ni credenciales que copiar, ni nada que pagar. Todo lo que necesita tu sitio es una línea que ELYRA te da lista para copiar.

Antes de empezar

Hacen falta dos cosas:

• Entrar al portal de ELYRA con un usuario que pueda configurar canales.
• Poder pegar una línea en el código de tu sitio, o tener a mano a quien lo administre. En la mayoría de los gestores de contenido hay un sitio para «código personalizado» o «scripts» donde va.

Y conviene tener clara la dirección de tu sitio (por ejemplo, https://www.tu-empresa.com), porque el chat solo responde desde los sitios que tú declares.

Paso a paso

1 · Crear el canal

En el portal entra a Conexiones y pulsa Nuevo canal. Ponle un nombre, elige el tipo Chat web y pulsa Crear.

2 · Ver que ya está publicado

El canal aparece en Conexiones marcado como activo. No tiene credenciales, porque no las necesita: el chat lo sirve ELYRA misma.

3 · Copiar la línea y pegarla en tu sitio

Pulsa Configurar en la tarjeta. La primera sección, El chat en tu sitio, tiene la línea que hay que pegar y su botón Copiar.

Esa línea va antes de cerrar el </body> de cada página donde quieras el chat. Si tu sitio tiene una plantilla común, con ponerla ahí una vez sale en todas. No hace falta nada más: ni estilos, ni otros archivos.

4 · Declarar en qué sitios puede vivir

Baja hasta Dónde puede vivir y escribe la dirección de tu sitio, una por línea, con https:// y sin barra al final. Si el chat va en más de un sitio (la página principal y un portal de ayuda, por ejemplo), van todas.

Esto es lo que evita que otra página copie tu línea y ponga tu chat donde tú no quieres: ELYRA solo responde desde las direcciones de esta lista. Si la dejas vacía, responde desde cualquier sitio. La página de muestra del paso 7 es de ELYRA y responde siempre: no hace falta declararla.

5 · Decidir cómo se ve

En Cómo se ve eliges el título de la cabecera, el texto del botón flotante, el color de tu marca, el tema claro u oscuro, la esquina, la forma del botón, el tamaño del panel y, si quieres, un logo. A la derecha hay una vista previa: es el chat de verdad, y puedes conversar con él sin guardar nada.

Pulsa Guardar al terminar. Aquí se decide cómo se ve el chat; lo que dice —el saludo, el menú, las preguntas— viene del paso siguiente.

6 · Darle una puerta

Un canal es por dónde entra la gente; lo que ELYRA hace con quien entra se llama interacción. Entra a Interacciones, pulsa Nueva interacción, ponle un nombre que diga qué hace y elige el canal que acabas de crear.

Al crearla se abre su documento. Ahí eliges con qué empieza la conversación (la capacidad inicial: normalmente una recepción que saluda y ofrece el menú) y pulsas Publicar. Hasta que publiques, el chat responde que por ahí todavía no hay nada configurado.

7 · Probar en la página de muestra

En la sección El chat en tu sitio hay un enlace, Ábrelo, que lleva a una página de prueba con el chat ya puesto. Sirve para verlo funcionar antes de tocar tu sitio.

Pulsa el botón y conversa. Lo que ves ahí es exactamente lo que verá quien entre a tu página.

8 · Verlo en el celular

Desde un teléfono, el chat ocupa toda la pantalla y sigue al teclado, sin que la página de atrás se mueva. No hay nada que configurar para eso.

Dónde va la línea según cómo esté hecho tu sitio

La línea es una sola etiqueta de script y no lleva ninguna configuración dentro. El color, los textos, el tamaño y los sitios permitidos se deciden en el portal, así que la misma línea sirve para cualquier página y no hay que volver a tocarla nunca, ni siquiera cuando cambies la apariencia.

• Un sitio hecho a mano. Antes de </body> en cada página, o una sola vez en la plantilla que comparten todas.
• WordPress, Wix, Squarespace, Shopify y parecidos. Todos tienen una casilla de «código personalizado» o «scripts del pie de página». Ahí.
• Una aplicación web de una sola página (React, Vue, Angular, Svelte, Next y demás). La línea va en el archivo HTML que envuelve toda la aplicación —normalmente index.html, o el envoltorio común si tu herramienta lo genera—, antes de </body>. No va dentro de un componente: el chat se cuelga por fuera de tu aplicación, así que navegar entre pantallas no lo borra, no lo duplica y no corta la conversación en curso.
• Una aplicación de escritorio o de celular que enseña una página web por dentro (lo que se llama un WebView). Funciona, siempre que la página que carga sea tuya y lleve la línea. Lee la advertencia de más abajo sobre Dónde puede vivir.

En una aplicación, la lista de sitios puede dejarte fuera

ELYRA reconoce de qué página viene cada mensaje por la dirección que anuncia el navegador. Una página web normal anuncia la suya; una aplicación que carga la página por dentro muchas veces no anuncia ninguna, y entonces no coincide con nada de Dónde puede vivir y el chat responde que no está habilitado.

Si te pasa, la lista tiene que quedar vacía —y entonces el chat responde desde cualquier sitio, que es justo lo que esa lista evita—. Es una limitación nuestra, no de tu aplicación, y está anotada para resolverse.

Abrirlo desde tu propio botón

El chat trae su botón flotante, pero puedes abrirlo desde donde tú quieras: un enlace que diga «¿Hablamos?», el botón de contacto, el final de un formulario. ELYRA deja dos órdenes disponibles en la página:

<button onclick="window.__elyraChat && window.__elyraChat.abrir()">
  ¿Hablamos?
</button>

• window.__elyraChat.abrir() abre el panel.
• window.__elyraChat.cerrar() lo cierra.

Por qué ese &&

La línea del chat se carga sin frenar tu página, así que durante el primer instante puede que todavía no esté lista. Ese && es lo que evita un error si alguien pulsa justo en ese momento: si aún no está, no hace nada.

Y si tu página ya sabe quién la está mirando —porque la persona entró con su usuario—, puedes decírselo para que la conversación empiece por su nombre:

window.__elyraChat.identificar("Andrea");

Ese nombre solo sirve para saludar. Lo declara tu página y ELYRA no lo comprueba, así que no reemplaza a una identificación de verdad: no lo uses para dar acceso a nada.

Lo que todavía no hay

Para que no lo busques:

• El chat siempre es un botón flotante en una esquina. No se puede incrustar dentro de un recuadro de tu página, como una sección más.
• Tu página no se entera de lo que pasa dentro del chat. No hay forma de reaccionar a «se abrió» o «llegó un mensaje».
• No hay una pieza para aplicaciones de celular hechas a medida. Se atiende con una página web dentro de la aplicación, como se explica arriba.
• Solo se puede pasar el nombre, no el correo, el teléfono ni otros datos de la persona.

Lo que conviene saber

• La gente puede adjuntar archivos con el clip del chat. ELYRA revisa cada archivo antes de aceptarlo: los tipos peligrosos no entran, los comprimidos se abren y se miran por dentro, y lo que no se puede revisar se rechaza diciéndolo.
• Lo que ELYRA manda llega como una tarjeta para descargar: un documento de la biblioteca, la plantilla de un lote o cualquier archivo que acompañe a un mensaje se ve con su nombre, y al pulsarlo se baja. El enlace de un archivo de paso caduca con él y solo sirve para lo que ELYRA mandó, nunca para lo que alguien subió.
• Los comandos se escriben con barra, como en WhatsApp: /ayuda, /cerrar.
• Un cambio de apariencia se ve al momento en la página de muestra, y en tu sitio puede tardar unas horas: los navegadores guardan una copia del chat. Recargar sin caché lo trae de inmediato.
• Si un día necesitas que el chat reciba pero no conteste, en la ficha del canal está Canal mudo; y la Lista negra deja fuera a las direcciones que no quieres atender.

Si algo no funciona

Lo que pasa	La causa más común
El chat dice «Este chat no está habilitado para este sitio»	La dirección de tu sitio no está en Dónde puede vivir, o está escrita distinto (falta el https://, sobra la barra final, o es otro subdominio).
El chat dice «no está habilitado» dentro de tu aplicación	La aplicación no anuncia ninguna dirección, así que no coincide con Dónde puede vivir. Hoy la única salida es dejar esa lista vacía.
El botón flotante no aparece en tu página	La línea no llegó a la página, o el gestor de contenidos la filtró. Comprueba que esté antes de </body> viendo el código de la página en el navegador.
El chat responde «Por aquí todavía no hay nada configurado»	Falta la interacción del paso 6, o no está publicada.
Cambiaste el color y en tu sitio sigue igual	Es la copia guardada por el navegador. Recarga sin caché, o espera unas horas.
En la página de muestra funciona y en tu sitio no	Casi siempre es la dirección declarada: la de la muestra la pone ELYRA; la de tu sitio la pones tú.