El código
Este es el formato que usa Parlo (la dirección y la altura son las tuyas):
<iframe src="https://tuchat.parlo.ink/" style="width:100%;height:650px;border:0" allow="clipboard-write; microphone"></iframe>
Qué hace cada atributo
| Atributo | Para qué sirve |
|---|---|
src | La dirección de tu chat (tuchat.parlo.ink o tu dominio propio en los planes que lo incluyen). Usa siempre https://. |
width / height (en style) | Tamaño del recuadro. 100% de ancho se adapta a la columna; la altura se fija en píxeles (entre 500 y 800 suele ir bien). |
border:0 | Quita el borde gris que los navegadores ponen por defecto a los iframes. |
allow="clipboard-write; microphone" | Delega permisos al chat: microphone deja que el navegador pida el micrófono dentro del chat (notas de voz; sin él, el navegador lo bloquea) y el permiso de portapapeles deja que el chat escriba en el portapapeles del visitante (por ejemplo, para copiar texto). |
title | Texto para lectores de pantalla y accesibilidad. Pon el nombre de tu chat. |
loading="lazy" | Opcional. El chat no se carga hasta que el visitante llega a esa zona de la página. |
Chat junto a un vídeo, adaptable al móvil
Con CSS puedes poner el reproductor y el chat en dos columnas que en pantallas pequeñas pasan a una sola:
<div class="directo">
<div class="video"><!-- tu reproductor --></div>
<iframe src="https://tuchat.parlo.ink/" title="Chat" allow="clipboard-write; microphone" loading="lazy"></iframe>
</div>
<style>
.directo{display:grid;grid-template-columns:1fr 360px;gap:16px}
.directo iframe{width:100%;height:600px;border:0}
@media (max-width:800px){.directo{grid-template-columns:1fr}}
</style>
Ajusta 360px y 600px a tu diseño. Más ejemplos de uso en chat para streaming y chat para radio online.
Si el iframe sale en blanco o no aparece
- Tu editor elimina los iframes. Algunos editores filtran el HTML. Usa su elemento de «Insertar código», «HTML» o «Embed» en lugar del editor de texto normal.
- Contenido mixto. Si tu web usa
http://y el chathttps://, el navegador puede bloquearlo. Pasa tu web a HTTPS. - Política de seguridad de tu web. Si tu sitio define una cabecera
Content-Security-Policyconframe-src, tienes que permitir la dirección de tu chat en ella. - Altura insuficiente. Si ves el chat cortado, sube el valor de
height. - Pruebas en local. Abre tu página desde un servidor o desde su dirección real, no como archivo suelto del disco, para evitar bloqueos del navegador.
Y si uso WordPress
Puedes pegar el iframe en un bloque HTML personalizado o instalar el plugin oficial, que genera el código con un shortcode o un bloque. Guía: chat para WordPress.
Preguntas frecuentes
¿Dónde copio el código del iframe?
En tu área de cliente y en los ajustes del propio chat, en la sección de insertar el chat en tu web.
¿El iframe funciona en el plan gratuito?
Sí. El plan Free incluye insertar el chat en tu web y muestra el enlace «Powered by Parlo».
¿Puedo hacer que el chat se adapte al móvil?
Sí: usa ancho 100% y, si lo pones junto a un vídeo, una cuadrícula CSS que pase a una columna en pantallas pequeñas, como en el ejemplo de arriba.
¿Por qué el micrófono no funciona?
Falta el permiso microphone en el atributo allow del iframe, o tu plan no incluye notas de voz (están en Pro y Business).