Web Widget

The web widget puts your AI Agent on your own website as a floating chat bubble. Visitors chat with the agent directly — no Veflow account needed on their side — and every thread lands in your Conversation inbox under the Web channel.

Publish an agent as a widget

1. Open your agent in the studio and click Publish, then choose Embed it to the web.
2. The Setting Chatbot AI Agent step lets you match the widget to your brand:
   • AI Agent Icon — upload your logo to use as the chat avatar.
   • Your Web Url — the website where the widget will live.
   • Primary Color — pick the accent color for the chat window.
3. Click Next, review, and publish. On success you'll see Publish Successful with the message "Embed the following link code on your website".
4. Click Copy to copy the Embed Script.

Embed the script

Paste the copied snippet into your website's HTML, ideally just before the closing body tag. It looks like this:

<script
  src="https://YOUR-VEFLOW-DOMAIN/widget.js"
  data-agent-id="YOUR-AGENT-ID"
  data-username="your-workspace"
  defer
></script>

Optional attributes let you tweak appearance without republishing:

Always use the exact snippet from the Publish Successful dialog — it already contains your agent's ID and workspace. If you lose it, republishing (or the publish menu of an already published agent) gives you the script again.

What visitors see

• A floating chat button in the corner of your site.
• On opening: your agent's name and icon, plus the First Chat Template greeting you configured in the studio.
• Your Question Suggestions as tappable starter questions.
• A normal chat exchange with the agent, grounded in its attached knowledge bases.

Every visitor reply the agent generates consumes AI credits from your company balance.

Testing before you embed

Use the widget playground page in the Veflow app to try the widget without touching your website: enter the agent ID and workspace username, optionally an icon and primary color, and inject the widget into the test page. This is the same script your visitors will load, so what you see there is what they get.

The studio's Debug and Preview panel remains the fastest way to test answers; the playground is for testing the embed itself.

Updating and unpublishing

• Changes you save in the studio flow through to the widget — the embed script does not need to change.
• To change branding (icon, color, URL), run Publish again with new settings.
• Unpublishing the widget disables the script on your site; the agent card returns to Draft publishing state for the web channel.

To reach customers on messaging apps instead, see Telegram and WhatsApp.