Website Widget

The osmTalk widget is a small button you embed on your website. When a visitor clicks it, they can chat (text) or talk (voice) with your AI agent. No phone numbers, no apps to install.

What visitors see

A floating button in the corner of your page:

                                              ┌──────────┐
                                              │  💬  Chat │
                                              └──────────┘

Click it, and they get a panel with:

• Chat box to type messages
• 🎤 Voice button to start a voice call
• # keypad button (if your agent supports DTMF)
• Live transcript while they speak

The widget uses your agent's voice, language, and system prompt — same agent works on phone, WhatsApp, and the widget.

Setup in 3 steps

Step 1: Configure how it looks

1. Open your agent in the dashboard
2. Go to Widget Config tab
3. Toggle Enable widget on
4. Customize:

Click Save.

Step 2: Create an API key

The widget needs a key to authenticate.

1. Settings → API Keys → + Create
2. Name it (e.g. "My website widget")
3. Allowed domains: list the sites it'll run on (yoursite.com, staging.yoursite.com)
4. Scopes: tick chat AND voice if you want both modes
5. Click Create
6. Copy the key immediately. It's shown only once.

Step 3: Paste a snippet on your site

Just before </body> on every page where you want the widget:

<script
  src="https://app.osmtalk.com/widget.js"
  data-agent-id="YOUR_AGENT_ID"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://api.osmtalk.com"
></script>

Replace the two placeholders with the values from Step 1 and Step 2.

That's it. Reload your site — the button appears in the corner.

What it costs

Same as any voice call, minus the phone-line charge (because there's no phone involved).

A 5-minute voice conversation typically costs ₹10-20. A 10-message text chat typically costs ₹2-3.

See Billing overview for the full breakdown.

Where the conversation lives

Every widget conversation is saved as a call (or chat session) in your dashboard:

The same agent config (prompt, tools, language) drives all of them.

Personalize per visitor (advanced)

You can pass per-visitor data to the widget so the AI knows who they are:

<script
  src="https://app.osmtalk.com/widget.js"
  data-agent-id="YOUR_AGENT_ID"
  data-api-key="YOUR_API_KEY"
  data-dynamic-variables='{"first_name":"Arjun","plan":"Pro"}'
></script>

In the agent's prompt, reference these as {{first_name}} / {{plan}}. The bot will greet by name. Full guide: Dynamic Variables.

Listen to events from your code

The widget emits JavaScript events you can hook into:

window.osmtalk?.on?.("call_started", () => console.log("call started"));
window.osmtalk?.on?.("message", ({ role, content }) => {
  console.log(`${role}: ${content}`);
});
window.osmtalk?.on?.("tool_call", ({ name, args }) => {
  // Run client-side actions (see Actions docs)
});

Useful for analytics or running client tools.

Common questions

"Will the widget work on mobile?" Yes — the widget is responsive. On mobile it expands to a sheet at the bottom of the screen.

"Can I hide the button until something happens?" Yes. Skip the auto-render by adding data-mode="manual" and call window.osmtalk.open() from your code whenever you want.

"Will it break my page's CSS?" No — the widget renders inside a Shadow DOM, so your page's CSS can't reach it and vice versa.

"Can I make it look different per page?" You can override config via the script's data-* attributes per page. Per-agent settings are global.

"My visitors are on poor internet. Voice keeps dropping." Recommend chat mode for those visitors. The chat path uses HTTP only (no realtime audio) and works on weak connections.

"Does it support languages other than English?" Yes — set the agent's language to Hindi/Tamil/etc. The widget UI is currently English-only but the conversation is in whatever language you configured.

What's next

• Tool status indicator — show "looking up your order..." in chat
• Voice settings — change the voice the widget uses
• API keys — manage / rotate keys