Cómo añadir un widget de agente IA a tu web

• Un agente Prostir publicado con un channel runtime model explícito, el switch Channels del agente activado y Model Usage Credits positivos para un modelo alojado o una clave BYOK guardada.
• El origin público exacto donde se ejecutará el widget, por ejemplo https://example.com. Usa HTTPS, el subdominio correcto y no pegues una ruta como /pricing.
• Acceso al website builder, CMS, tag manager o plantilla HTML donde puedes pegar un pequeño script antes de </body> o en un campo de custom code global.

El patrón es directo: publicas el agente, creas el canal Web widget, pulsas Save, copias el script, lo pegas en la web y pruebas desde el origin permitido.

1. 01
   Crea el agente IA en Prostir.

   Escribe qué debe hacer el website agent, añade páginas, FAQs, docs, pricing notes, support rules y tools. Elige el modelo antes de mostrarlo a visitantes.

2. 02
   Publica el agente.

   El website widget usa el published agent runtime. Si el agente sigue solo en draft, el embed script no puede servir un website chatbot público fiable.

3. 03
   Abre Channels y elige Web widget.

   Activa el switch Channels del agente y selecciona Web widget. No necesita token externo, pero el canal queda desactivado hasta superar las comprobaciones de runtime.

4. 04
   Añade allowed origins.

   Añade cada origin HTTPS exacto donde puede correr el widget, como https://example.com y https://www.example.com. Prostir bloquea origins externos no listados para que otro sitio no reutilice tu script.

5. 05
   Diseña el chat widget.

   Configura position, width, height, colors, greeting text, intro text, input placeholder, launcher label y quick actions. Las primeras acciones sugeridas deben parecerse a preguntas reales: pricing, booking, support, order status o product fit.

6. 06
   Pulsa Save.

   Save guarda la configuración y activa el Web widget solo si pasan las comprobaciones de publicación, runtime model explícito, switch Channels del agente, allowed origins, configuración y créditos alojados o BYOK. Si no, queda desactivado con un error visible.

7. 07
   Copia el embed script.

   Copia el widgetEmbedUrl devuelto. Siempre usa el slug publicado y el channel id exacto: https://{slug}.ai.prostir.build/widget/embed.js?channelId={id}.

8. 08
   Pega el script en tu web.

   En una web con HTML propio, pégalo antes de </body>. En Webflow, WordPress, Shopify, Wix, Squarespace, Framer u otro builder, usa custom code global, embed code o custom HTML.

9. 09
   Prueba desde la web real.

   Abre el dominio permitido real, no un preview URL cualquiera. Haz una pregunta real, revisa la respuesta y confirma que la conversación aparece en Channels.

Un buen website AI agent es más que una burbuja de chat.

Channels, Web widget, allowed origins, Save.

• Usa el dominio real incluido en allowed origins. Si pruebas desde otro preview origin, el widget puede fail closed por diseño.
• Pregunta lo que preguntaría un lead: price, availability, next step, fit, support, refund o implementation time.
• Si la respuesta flojea, actualiza instructions o knowledge en Prostir, publica otra vez y el widget embebido usará el agente mejorado sin reconstruir la web.