Saltearse al contenido

Instalar el widget de Silvio en tu web

Autorizar el dominio de tu web

Section titled “Autorizar el dominio de tu web”

Antes de incrustar el widget, la instancia Futuh tiene que reconocer el dominio desde el que se va a embeber como dominio autorizado. Sin esto, el navegador bloqueará la conexión por política CORS.

  1. En tu instancia Futuh, abre Ajustes → Técnico → Chat en vivo → Canales.
  2. Abre el canal asociado a Silvio (normalmente se llama Futuh Web o tiene el nombre de tu organización).
  3. Busca la pestaña Reglas de canal.
  4. En la regla activa, añade el dominio público de tu web en el campo de URL permitida. Por ejemplo: https://mi-organizacion.org.
  5. Guarda y verifica que la regla queda activa con la acción Mostrar botón y texto o Mostrar solo botón.

Copiar las dos etiquetas script

Section titled “Copiar las dos etiquetas script”

Silvio se incrusta con dos etiquetas <script>. La primera carga el código del widget, la segunda registra los recursos necesarios.

  1. En el canal Silvio, abre la sección Canales web.
  2. Verás un fragmento de código listo para copiar. Contiene dos etiquetas script: una apunta a /im_livechat/loader/... y la otra a /im_livechat/assets_embed.js.
  3. Copia el fragmento entero.

El fragmento tiene esta forma aproximada (reemplaza el dominio por el de tu instancia):

<script defer src="https://mi-organizacion.futuh.coop/im_livechat/loader/2"></script>
<script defer src="https://mi-organizacion.futuh.coop/im_livechat/assets_embed.js"></script>

El número final del loader es el identificador del canal. Si tu instancia tiene varios canales, asegúrate de copiar el del canal Silvio y no otro.

Pegar el snippet en tu web

Section titled “Pegar el snippet en tu web”

Dónde pegar el snippet depende del sistema con el que esté construida tu web.

En una web estática o generada (Astro, Eleventy, Hugo, Jekyll)

Section titled “En una web estática o generada (Astro, Eleventy, Hugo, Jekyll)”
  1. Abre la plantilla base de tu sitio (Base.astro, _layout.html o equivalente).
  2. Pega las dos etiquetas script justo antes del cierre de </body>.
  3. Vuelve a desplegar la web.

En WordPress, Drupal o un CMS similar

Section titled “En WordPress, Drupal o un CMS similar”
  1. Entra en el panel de administración.
  2. Busca la sección Apariencia → Editor del tema o Configuración → Scripts del pie de página, según tu CMS.
  3. Pega las dos etiquetas script en el bloque de scripts del pie.
  4. Guarda y limpia la caché si tu CMS la usa.

En un servicio sin acceso al HTML

Section titled “En un servicio sin acceso al HTML”

Si tu plataforma no permite añadir scripts en el HTML (algunos creadores de webs lo restringen), no podrás incrustar el widget directamente. Alternativa: usar un enlace que abra la conversación con Silvio en una pestaña nueva apuntando a tu instancia Futuh.

Verificar que funciona

Section titled “Verificar que funciona”
  1. Abre la web pública en una ventana de incógnito (para descartar caché).
  2. En la esquina inferior derecha debe aparecer la burbuja del chat.
  3. Haz clic en la burbuja. Debería abrir la ventana de chat con el saludo de Silvio.
  4. Escribe una pregunta de prueba. Silvio debe contestar en pocos segundos.

Solución de problemas

Section titled “Solución de problemas”
  • La burbuja no aparece: revisa que las dos etiquetas script están en la página y que el dominio de tu web está autorizado en las reglas del canal.
  • La burbuja aparece pero el chat no carga: abre la consola del navegador. Si ves errores de CORS, el dominio no está autorizado correctamente. Si ves errores de red, comprueba que el dominio de tu instancia Futuh es accesible públicamente.
  • El chat carga pero Silvio no responde: ver en la instancia Futuh que el agente está activo y que el modelo IA tiene clave de API válida. Detalle en Configurar Silvio.
  • El estilo del widget no encaja con tu web: puedes personalizar colores y tipografía desde la ficha del canal en Futuh, en la pestaña de personalización visual.

Próximos pasos

Section titled “Próximos pasos”