Desplegar
Embeds
Agrega tus agentes directamente a cualquier sitio web con fragmentos de código de embed.
Los embeds te permiten agregar tus agentes directamente a tu propio sitio web o a cualquier sitio donde puedas insertar una etiqueta de script o un iframe. Usa un embed cuando quieras que una herramienta de IA aparezca junto a tu contenido existente, como Pickaxe Doorman, que responde las preguntas de los visitantes en pickaxe.co.
Crear un embed
- Abre el agente que quieres insertar.
- Crea un nuevo deployment de tipo Embed.
- Elige el tipo de embed que se adapte a tu página.
- Personaliza el diseño y revisa el resultado en la vista previa.
- Haz clic en Save Embed y copia el código generado en tu sitio web.
Puedes volver al editor del embed en cualquier momento. Los cambios que guardes se aplican al embed existente, por lo que no necesitas reemplazar el código en tu sitio web.
Tipos de embed
Pickaxe ofrece cinco estilos de embed para distintos casos de uso y diseños:
| Tipo de embed | Descripción |
|---|---|
| Inline Flex | Una interfaz de chat responsiva que aparece dentro del contenido de tu página y se adapta a su contenedor. |
| FAB (Floating Action Button) | Un botón de chatbot que flota en la esquina de la página y crea una experiencia familiar de widget de chat. |
| Popup from Button | Una ventana de chat que se abre cuando un usuario hace clic en un botón que colocas en tu página. |
| Chat Input | Un campo de entrada independiente que puedes colocar en cualquier parte de tu página. Solo para agentes de chat. |
| Inline (iframe) | Un iframe de tamaño fijo para colocar un agente en una página con aislamiento completo del sitio que lo contiene. |
Las primeras cuatro opciones usan un embed con script. La opción Inline usa un iframe.
Personalizar sin código
El editor de embeds incluye controles para los cambios de diseño más comunes. Puedes personalizar:
- Colores y fuentes
- Tamaño del texto y del contenedor
- Ancho, alto y radio de las esquinas
- Texto del campo de entrada
- White-labeling en los planes compatibles
- Límites de uso y el mensaje que ven los usuarios cuando alcanzan un límite
Usa la vista previa para revisar el resultado antes de guardar. Si editas estos ajustes más adelante, el embed guardado se actualizará en todos los lugares donde ya lo hayas instalado.
Algunos ajustes visuales pertenecen al agente y no al embed. Configura el logotipo del agente en Agent Builder → Configure y edita su mensaje de introducción y sus ice breakers en Agent Builder → Prompt.
Templates y temas: Los embeds se diseñan eligiendo un tipo de embed y ajustando su apariencia en el editor. Para crear páginas completas con templates prediseñados y controles de tema, usa Pages.
Agregar imágenes, video y texto con formato
Un embed coloca la interfaz del agente en tu sitio. Las imágenes o los videos que deban aparecer junto al agente pertenecen a la página donde instalas el embed. Agrega ese contenido con el constructor de tu sitio, tu CMS o el código de la página y coloca el embed a su lado.
Pickaxe también ofrece algunas opciones relacionadas:
- Usa el logotipo del agente cuando quieras mostrar un avatar o una imagen de marca en la interfaz.
- Agrega imágenes, archivos de video o contenido de YouTube a la Base de conocimiento cuando el agente deba aprender de ese material. Las fuentes de conocimiento no aparecen automáticamente como contenido visual en el embed.
- Pide al agente que use Markdown cuando quieras aplicar énfasis como negrita o cursiva en sus respuestas. Prueba el resultado en Preview antes de publicarlo.
- Usa JavaScript personalizado cuando necesites contenido multimedia o elementos de diseño dentro de un layout de embed personalizado.
Personalización avanzada con JavaScript
Para realizar cambios que van más allá de los controles visuales, abre la sección Custom JavaScript del embed. El editor acepta JavaScript que se incluye con el código generado del embed. JavaScript puede crear elementos HTML o inyectar estilos CSS cuando sea necesario. Algunos usos comunes son:
- Inyectar estilos para los elementos disponibles en el embed
- Crear un encabezado, una imagen o un elemento decorativo personalizado
- Cambiar el estilo de las burbujas de chat y los estados interactivos
- Agregar analítica o seguimiento de eventos
- Crear comportamientos personalizados alrededor del agente
Empieza con los controles integrados siempre que sea posible. El JavaScript que apunta a elementos internos puede requerir mantenimiento si cambia la interfaz del embed.
Embeds con script e iframes
Los embeds con script funcionan directamente con la página y son la mejor opción cuando necesitas diseños responsivos o una interacción avanzada con el sitio que los contiene.
El iframe Inline mantiene al agente aislado de la página. El CSS y JavaScript del sitio no pueden cambiar directamente el estilo ni controlar los elementos dentro del iframe.
Instalar el embed en tu sitio
Pega el script o iframe generado en un bloque de HTML personalizado o de embed en tu sitio. Esto funciona con constructores de sitios web y sistemas de contenido que aceptan scripts o iframes, incluidos WordPress, Webflow, Wix, Squarespace, Notion, Kajabi y sitios personalizados.
Después de publicar la página, prueba el embed tanto en desktop como en mobile. Comprueba su tamaño, el tiempo de carga, el campo de entrada y cualquier mensaje relacionado con los límites de uso.
Para ver una guía más detallada, consulta Cómo insertar chatbots de IA en tu sitio web.