Skip to Content
DocumentationWidgetQuickstart

Prerequisites

  • An Oshara account — sign up at app.oshara.ai 
  • An agent slug — the URL-friendly identifier for the AI character you want to embed (e.g. support-bot)
  • The domain you’re embedding on must be added to the character’s Allowed Origins list in the dashboard

Step 1 — Paste the script tag

Add this snippet before the closing </body> tag of any HTML page:

<script
  src="https://api.oshara.ai/widget.js"
  data-agent="YOUR_AGENT_SLUG"
  data-api-url="https://api.oshara.ai">
</script>

Replace YOUR_AGENT_SLUG with your character’s slug. That’s it — a floating button will appear in the bottom-right corner.

Step 2 — Verify the call works

  1. Open the page in a browser.
  2. Click the floating button to open the voice panel.
  3. Accept microphone permission when prompted.
  4. Click Start Call — you should hear the agent’s greeting within a few seconds.

Minimal embed (copy-paste)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Site</title>
</head>
<body>
  <h1>Welcome</h1>
 
  <!-- Oshara voice widget -->
  <script
    src="https://api.oshara.ai/widget.js"
    data-agent="support-bot"
    data-api-url="https://api.oshara.ai">
  </script>
</body>
</html>

Full embed with all options

<script
  src="https://api.oshara.ai/widget.js"
  data-agent="support-bot"
  data-api-url="https://api.oshara.ai"
  data-open-chat="true"
  data-deepfilter-module-url="https://esm.sh/mezonai-deepfilter"
  data-deepfilter-wasm-url="https://cdn.mezon.ai/df_bg.wasm"
  data-deepfilter-onnx-url="https://cdn.mezon.ai/DeepFilterNet3_onnx.tar.gz">
</script>

See Configuration for every available attribute.

Auto-open the panel

Set data-open-chat="true" to expand the voice panel as soon as the page loads — useful for dedicated landing pages.

<script
  src="https://api.oshara.ai/widget.js"
  data-agent="support-bot"
  data-open-chat="true">
</script>

Window-global alternative

If your site uses a tag manager or dynamic script injection, set window globals before loading the script:

<script>
  window.VOICE_AGENT_SLUG   = "support-bot";
  window.VOICE_API_URL      = "https://api.oshara.ai";
  window.VOICE_OPEN_CHAT    = true;
</script>
<script src="https://api.oshara.ai/widget.js"></script>

Allowed Origins

The widget will be blocked if the embedding domain isn’t whitelisted on the character. Add origins in the dashboard under Characters → [your character] → Allowed Origins. Entries are URL prefixes, e.g.:

https://mysite.com
https://staging.mysite.com

Next steps

Last updated on
IntroductionConfiguration