How to add an AI agent widget to your website

• A published Prostir agent with an explicit channel runtime model, the agent-level Channels switch turned on, and either positive Model Usage Credits for a Prostir-hosted model or a saved BYOK provider key.
• The exact public site origin where the widget will run, for example https://example.com. Use HTTPS, include the right subdomain, and do not paste a path like /pricing.
• Access to your website builder, CMS, tag manager, or HTML template where you can paste a small script before </body> or into a site-wide custom-code field.

The pattern is simple: publish the agent, create the Web widget channel, Save, copy the script, paste it into the site, then test from the allowed origin.

1. 01
   Create the AI agent in Prostir.

   Write what the website agent should do, add the pages, FAQs, docs, pricing notes, support rules, and tools it can use. Choose the model before exposing it to visitors.

2. 02
   Publish the agent.

   The website widget uses the published agent runtime. If the agent is still draft-only, the embed script cannot serve a reliable public website chatbot.

3. 03
   Open Channels and choose Web widget.

   In the agent, turn on the agent-level Channels switch and choose Web widget. No third-party token is needed, but the channel stays disabled until its runtime checks pass.

4. 04
   Add allowed origins.

   Add each exact HTTPS origin where the widget may run, such as https://example.com and https://www.example.com. Prostir blocks unlisted external origins so another site cannot reuse your widget script.

5. 05
   Design the chat widget.

   Set position, width, height, colors, greeting text, intro text, input placeholder, launcher label, and quick actions. Keep the first suggested actions close to what visitors actually ask: pricing, booking, support, order status, or product fit.

6. 06
   Press Save.

   Save stores the Web widget settings and enables the channel only when publication, the explicit runtime model, the agent-level Channels switch, allowed origins, configuration, and hosted-credit or BYOK checks pass. Otherwise it stays disabled with a visible error.

7. 07
   Copy the embed script.

   Copy the returned widgetEmbedUrl. It always uses the published slug and exact channel id: https://{slug}.ai.prostir.build/widget/embed.js?channelId={id}.

8. 08
   Paste the script on your website.

   For a hand-coded site, paste it before </body>. In Webflow, WordPress, Shopify, Wix, Squarespace, Framer, or another builder, use the site-wide custom code, embed code, or custom HTML area.

9. 09
   Test from the live site.

   Open the actual allowed domain, not a random preview URL. Ask a real question, check the answer, and confirm the conversation appears in Channels.

A good website AI agent needs more than a launcher bubble.

Channels, Web widget, allowed origins, Save.

• Use the real domain listed in allowed origins. If you test from a different preview origin, the widget can fail closed by design.
• Ask the same questions a lead would ask: price, availability, next step, fit, support, refund, or implementation time.
• If the answer is weak, update the agent instructions or knowledge in Prostir, publish again, and the embedded widget picks up the improved agent without rebuilding your website.