@useruna/widget

Embed the Runa AI chat widget into any website with a single script tag — no framework, no build step, no dependencies.

CDN Usage

Add this one line to your HTML before </body>:

<script
  src="https://cdn.useruna.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-color="#6366f1"
  data-position="bottom-right"
  async>
</script>

That's it. A floating chat button will appear on your page immediately.

Configuration Attributes

| Attribute | Default | Description | |-----------|---------|-------------| | data-api-key | — | Your Runa API key from the dashboard. | | data-color | #6366f1 | Primary accent color (hex). | | data-position | bottom-right | Button position: bottom-right or bottom-left. | | data-title | AI Assistant | Title shown in the widget header. | | data-greeting | Hi! I'm your AI assistant... | Opening message shown to users. | | data-endpoint | https://api.useruna.ai | Custom API endpoint URL. |

Examples

Custom color and position

<script
  src="https://cdn.useruna.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-color="#7c3aed"
  data-position="bottom-left"
  data-title="Support"
  data-greeting="Hey! Need help? Ask me anything."
  async>
</script>

Self-hosted

If you prefer to self-host the script instead of using the CDN:

npm install @useruna/widget

Then serve node_modules/@useruna/widget/dist/widget.js from your own CDN or static file server.

<script
  src="https://your-cdn.com/widget.js"
  data-api-key="YOUR_API_KEY"
  async>
</script>

Build from Source

git clone https://github.com/useruna/widget
cd widget
npm install
npm run build        # minified production build → dist/widget.js
npm run build:dev    # unminified dev build
npm run watch        # watch mode

Bundle Size

| Build | Size | |-------|------| | Minified | ~10 KB | | Minified + gzipped | ~4 KB |

Zero external dependencies.

License

MIT © Runa AI