How to Add an AI Agent to Any Website in 60 Seconds

Most agent platforms make embedding feel like a software engineering project. You need npm, a build pipeline, React wrappers, and a weekend to figure out the docs. That is not how it should work.

With hiroi, you add an AI agent to any website with a single line of HTML. No dependencies, no build steps, no backend. If you can paste a script tag, you can have a working AI agent on your site in under a minute.

The 3-Step Process

Step 1: Create Your Agent

Sign up at hiroi.ai and create a new agent from the dashboard. Give it a name, pick a personality, and optionally upload documents for it to reference. The whole setup takes about 30 seconds.

You can configure:

• System prompt to define the agent's tone and expertise
• Knowledge base documents (PDFs, DOCX, plain text) for domain-specific answers
• Voice profile if you want voice chat enabled
• Appearance including colors and positioning

Step 2: Configure Your Domains

Head to the settings tab and add the domains where your widget will live. hiroi uses a domain safelist for security — the widget only works on domains you explicitly authorize.

• Add yourdomain.com and www.yourdomain.com separately (exact match, no wildcards)
• For local development, add localhost or 127.0.0.1
• No API keys are exposed in the browser — just your site ID, which is safe to share publicly

Step 3: Paste the Script Tag

Copy the embed snippet from your dashboard and paste it before the closing </body> tag on your site:

<script src="https://hiroi.ai/widget.js"
        data-site-id="your-site-uuid-here"></script>

That is it. Reload your page and you will see the chat orb appear in the bottom-right corner. Click it, and your AI agent is live.

Why a Single Script Tag Matters

I built hiroi this way because I was tired of the alternative. Here is what embedding looks like with most agent platforms:

1. Install an npm package
2. Import the component into your React/Vue/Svelte app
3. Configure API keys (often exposed client-side)
4. Set up a backend proxy to hide those keys
5. Handle WebSocket connections
6. Style overrides to match your site
7. Debug why it breaks in production but works in dev

With hiroi, you skip all of that. The widget script is self-contained — it injects its own styles, creates its own DOM elements, handles its own WebSocket connections, and cleans up after itself. It works on:

• Static HTML sites — just paste the tag
• WordPress — add it to your theme's footer or use a header/footer plugin
• Shopify — paste into your theme's theme.liquid
• Squarespace, Wix, Webflow — use their custom code injection features
• React, Next.js, Vue, Svelte — works alongside any framework without conflicts

Security Without Complexity

A common concern with script-tag embeds is security. If there is no API key, how does the server know who is authorized?

hiroi validates the Origin header on every request. Browsers cannot spoof the Origin header, so the server knows exactly which domain is making the request. If the origin does not match your safelist, the request is rejected.

This means:

• Your site ID is safe to commit to version control
• No secrets are ever sent to the browser
• No backend proxy is needed
• No environment variable juggling between dev and prod

For apps that need user-level authentication (SaaS products, logged-in experiences), hiroi also supports session-signed tokens where your backend generates a short-lived HMAC token. But for most sites, the domain safelist is all you need.

What You Get Out of the Box

The single script tag gives you a full-featured AI agent:

• Text chat with streaming responses
• Voice chat with real-time speech recognition and TTS
• Audio-reactive waveform visualization on the orb
• Mobile-responsive layout that adapts to any screen size
• Page Integration so the AI can read and interact with your page content
• Guided tours for onboarding and demos
• Conversation history persisted per visitor

Getting Started

Head to hiroi.ai, create your first agent, and paste the script tag on your site. The whole process genuinely takes about 60 seconds.

If you run into issues, the widget logs everything to the browser console prefixed with [VA Widget] — check there first. And if you want to see it in action before committing, try the live preview in the dashboard. No code required.