Documentación

Framer

Agrega tu agente a un sitio de Framer usando Custom Code.

Agrega tu agente de IA a un sitio de Framer mediante Custom Code. El snippet se carga en todas las páginas una vez que publicas el sitio.

En Agentkit, abre Channels → Website embed → Chat widget, activa el canal y copia todo el código generado. Incluye un script de inicio en línea y otro que carga el widget.

Configuración rápida

  1. Abre tu proyecto en Framer.
  2. En la barra lateral izquierda, haz clic en Project Settings (el ícono del engranaje).
  3. Selecciona la pestaña Custom Code.
  4. Si es tu primera entrada, haz clic en Add Script; si no, en el ícono +.
  5. Dale al script un nombre fácil de reconocer (por ejemplo, Agentkit Widget).
  6. Pega juntos los dos scripts generados en el campo Custom Code. Conserva la URL del script y el ID del agente tal como aparecen.
  7. En la ubicación, elige End of <body> tag (Body End); es la opción recomendada para widgets de chat.
  8. Elige que se cargue en All Pages.
  9. Haz clic en Save.
  10. Haz clic en Publish, en la esquina superior derecha, para publicar la actualización.

No uses un ejemplo de un solo script ni escribas la URL del widget por tu cuenta. Tras publicar, comprueba que ambos elementos <script> aparecen en el código fuente de la página. Luego abre el widget y envía un mensaje de prueba. Guía del widget JavaScript →

Por qué al final de <body> y no en el head

Framer separa Custom Code en Head Code y End of <body> Code. Los widgets de chat deben ir al final de <body> para no retrasar el primer renderizado de la página; esto también coincide con el atributo async del script.

Head Code está reservado para elementos que deben ejecutarse muy temprano, como píxeles de analítica o precargas de fuentes.

Instalación en páginas específicas

Para cargar el widget solo en páginas específicas:

  1. Selecciona una página en el panel de capas de Framer.
  2. Abre Page Settings (panel derecho).
  3. Agrega ahí el Custom Code en lugar de hacerlo en Project Settings.

El código a nivel de página solo se ejecuta en esa página específica.

Planes y dominios

Después de publicar

El Custom Code de Framer no se ejecuta en el editor ni en la vista previa, solo en el sitio publicado. Después de hacer clic en Save, haz clic en Publish y abre la URL en vivo.

Solución de problemas

El widget no aparece en la vista previa del editor.

  • Es lo esperado. Custom Code solo se ejecuta en el sitio publicado.

El widget tampoco aparece en el sitio publicado.

  • Confirma que hiciste clic tanto en Save como en Publish.
  • Revisa las restricciones de dominio para tu dominio publicado en Framer.
  • Haz una recarga forzada (⌘+Shift+R) para omitir la caché del CDN.

El widget aparece un instante y luego desaparece.

  • Revisa si hay transiciones de página o animaciones de Framer que puedan volver a cargar el DOM. El widget debería volver a montarse en cada carga de página; si no lo hace, contacta a soporte.

Pruebas

  1. Abre la URL publicada en una ventana de incógnito.
  2. Busca la burbuja de chat.
  3. Haz clic para abrirla y envía un mensaje de prueba.

Próximos pasos