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.

Primero, obtén tu código de incrustación desde Chatbot > Publicar en el panel.

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. Haz clic en + Add Script.
  5. Dale al script un nombre fácil de reconocer (por ejemplo, Agentkit Widget).
  6. Pega tu código de incrustación en el cuerpo del script.
  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.

Formato de ejemplo (usa los valores reales de Chatbot > Publicar):

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>

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

  • Custom Code está disponible en los sitios de Framer, pero ejecutarlo en un dominio personalizado (que no sea *.framer.website) normalmente requiere un plan de pago.
  • El widget funciona en la URL predeterminada *.framer.website si tu plan permite usar Custom Code ahí.

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.
  • Confirma que tu dominio esté permitido en Chatbot > Publicar > Seguridad.
  • 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