Chat con huéspedes,
en tu propia web.

1. 1
   Crea tu widget

   Abre la app Widget de Chat con IA en Prohost y define el nombre, el saludo y el estilo del botón que verán tus visitantes.

2. 2
   Copia tu fragmento

   En la sección Añadir a otra web, copia el fragmento. Ya incluye el id de tu widget, tu clave de inserción y los ajustes del botón.

3. 3
   Pégalo antes de la etiqueta body de cierre

   Colócalo en el pie global de tu web o en la zona de código personalizado y publica. El botón aparecerá en la esquina en la siguiente carga de página.

<script
  src="https://app.prohost.ai/webchat.js"
  data-widget="WIDGET_ID"
  data-api-key="WIDGET_API_KEY"
  data-position="bottom-right"
  data-launcher-color="#4F46E5"
  data-launcher-icon="chat"
  data-sound="on"
  async></script>

Sustituye WIDGET_ID y WIDGET_API_KEY por los valores de los ajustes de tu widget, o copia directamente el fragmento ya preparado desde la app, que los rellena por ti. La clave de inserción es pública y solo sirve para ese widget: no da ningún acceso a tu cuenta. Prohost oculta la clave después de mostrarla la primera vez, así que usa Rotar clave si necesitas un fragmento nuevo que puedas copiar.

<script
  src="https://app.prohost.ai/webchat.js"
  data-widget="WIDGET_ID"
  data-api-key="WIDGET_API_KEY"
  async></script>

Funciona en la mayoría de creadores de webs: Webflow, WordPress, Squarespace y Wix tienen un espacio para código personalizado en el pie de página.

data-hide-mobile solo cuenta por su presencia: cualquier valor, incluida una cadena vacía, lo activa. El resto de atributos se evalúan por su valor, y data-sound en concreto solo reacciona al valor exacto en minúsculas on.

• El visitante tiene que interactuar antes con la página

  Los navegadores bloquean el audio hasta que alguien hace clic, toca o escribe. Abrir el botón cuenta, y escribir en la ventana también, así que quien envió el mensaje que provocó la respuesta la oirá. Si aun así el navegador bloquea la reproducción, no pasa nada: el indicador de no leídos en el botón es la señal principal y el sonido es un extra.

• Nunca suena mientras están leyendo

  No suena si la ventana está abierta y la pestaña en primer plano: la respuesta ya está en pantalla. Suena con la ventana cerrada o la pestaña en segundo plano. El indicador de no leídos sigue una regla algo más estrecha: solo aparece con la ventana cerrada.

• Una ráfaga de respuestas, un solo tono

  Varios mensajes que llegan juntos producen un único aviso, no uno por mensaje.

function wireUpWebchat() {
  window.ProhostWebchat.on('webchat_host_message', (event) => {
    console.log(event.type);
  });

  document.querySelector('#my-chat-button')?.addEventListener('click', () => {
    window.ProhostWebchat.open();
    // window.ProhostWebchat.close() collapses it again.
  });
}

if (window.ProhostWebchat) {
  wireUpWebchat();
} else {
  // src*= rather than src$= — the tag may carry a cache-busting query string.
  document
    .querySelector('script[src*="/webchat.js"]')
    ?.addEventListener('load', wireUpWebchat);
}

Útil junto con data-hide-mobile: oculta el botón por defecto en móvil y abre la ventana desde un botón tuyo. Los eventos solo se retransmiten cuando vienen de la inserción de Prohost, nunca de otro origen.