Widget del sitio web

Agrega tu agente como un widget de chat en tu sitio web. Configúralo desde el dashboard del agente e insértalo con un fragmento de código.

Configurar el widget

1. Abre el perfil del agente en el dashboard de Fonema.
2. Ve a la pestaña Medios.
3. Abre Widget del sitio web y personaliza su apariencia y textos.

Configuración

Opción	Descripción
Título del widget	Título que se muestra en el encabezado del widget (por ejemplo, Agente Chat).
URL del ícono	URL de la imagen del ícono del widget (por ejemplo, https://example.com/icon.png).
Color principal	Color de acento principal del widget (valor hexadecimal, por ejemplo #1e3a8a).
Mensaje de bienvenida	Saludo que ve el visitante al abrir el chat (por ejemplo, Hola!).
Texto del campo de mensaje	Texto de marcador de posición en el campo de entrada (por ejemplo, Send a message...).
Mensajes sugeridos	Respuestas rápidas que el visitante puede tocar para iniciar la conversación. Usa Agregar mensaje sugerido para añadir más.
Texto del lanzador	Texto principal del botón flotante antes de abrir el chat.
Subtítulo del lanzador	Texto secundario que aparece debajo del texto del lanzador.

Después de guardar, copia el código de inserción que aparece al final de la sección.

Insertar en tu sitio

Pega este fragmento antes de la etiqueta de cierre </body> de tu sitio web:

<script src="https://dashboard.fonema.ai/sdk/text-embed.js" async></script>
<script>
  function initFonemaWidget() {
    if (!window.Fonema) return setTimeout(initFonemaWidget, 50);
    window.Fonema.init({ slug: 'TU_SLUG_DEL_AGENTE' });
  }
  initFonemaWidget();
</script>

Reemplaza TU_SLUG_DEL_AGENTE con el slug que aparece en tu dashboard (por ejemplo, Kevin-DEPG28K8).

Control programático

Fonema.init() devuelve una instancia del widget que puedes usar para abrir o cerrar el panel de chat desde tu propio JavaScript.

// Modo launcher (por defecto): botón flotante
const widget = Fonema.init({
  slug: 'TU_SLUG_DEL_AGENTE',
  displayMode: 'launcher',
});

// Modo inline: pasa target (displayMode es opcional)
const inlineWidget = Fonema.init({
  slug: 'TU_SLUG_DEL_AGENTE',
  target: document.getElementById('fonema-widget'),
});

// Opcional: exponer en la consola del navegador mientras desarrollas
window.widget = widget;

// Abre el panel del launcher (no hace nada en modo inline, que siempre está abierto)
widget.open();

Opciones de Fonema.init()

Opción	Tipo	Descripción
slug	string	Requerido. Slug del agente del código de inserción en el dashboard.
displayMode	string	Opcional. launcher muestra un botón flotante (por defecto). inline incrusta el chat dentro de target. Puedes omitirlo cuando defines target.
target	HTMLElement	Opcional. Elemento contenedor para el modo inline. Al definirlo, el widget se renderiza dentro y displayMode es opcional.

Métodos del widget

Método	Descripción
widget.open()	Abre el panel de chat. En modo inline el chat siempre está visible, así que no tiene efecto.
widget.close()	Cierra el panel de chat.

Ejemplo: abrir al cargar la página

function initFonemaWidget() {
  if (!window.Fonema) return setTimeout(initFonemaWidget, 50);

  const widget = window.Fonema.init({ slug: 'TU_SLUG_DEL_AGENTE' });
  window.widget = widget;
  widget.open();
}
initFonemaWidget();

Ejemplo: botón personalizado

<button type="button" id="open-chat">Chatea con nosotros</button>

<script src="https://dashboard.fonema.ai/sdk/text-embed.js" async></script>
<script>
  let widget;

  function initFonemaWidget() {
    if (!window.Fonema) return setTimeout(initFonemaWidget, 50);
    widget = window.Fonema.init({ slug: 'TU_SLUG_DEL_AGENTE' });
    document.getElementById('open-chat').addEventListener('click', () => widget.open());
  }

  initFonemaWidget();
</script>