Sleekio Widget

Voice input for any website. One script tag.

Add a mic button to every text field on your site — your users click, speak, and Whisper-accurate text lands in the field. 20+ languages, auto-detected. No backend, no audio code, no browser-quirk debugging.

Live demo & docs → (try it in your browser, no signup)

<script src="https://sleekio.io/widget.js" data-key="pk_live_YOURKEY"></script>

That's the whole integration. Get a free key (300 transcriptions/month, no card) at sleekio.io/dashboard/websites.

Install with npm

For React/Vue/bundler projects:

npm install sleekio-widget

Vanilla / any framework — load it once, mics attach to your text fields:

import { loadSleekio } from "sleekio-widget";

loadSleekio({ key: "pk_live_YOURKEY" });

React — a drop-in input with a mic:

import { SleekioInput } from "sleekio-widget/react";

function CommentBox() {
  return (
    <SleekioInput
      apiKey="pk_live_YOURKEY"
      multiline
      placeholder="Speak or type a comment…"
      onResult={(text, meta) => console.log(text, meta.language)}
    />
  );
}

The package is a thin loader (like @stripe/stripe-js): it loads the hosted widget.js so the client always matches the current API. Ships with TypeScript types. No lock-in — pass loadSleekio({ src: "/my-widget.js" }) to serve your own copy instead.

What's in this repo

The full, unminified source of the widget client (widget.js) — the exact file served from sleekio.io/widget.js. It's here so you can read what runs on your page before you add it. The transcription API behind it is the hosted part of the product.

• < 15 KB, zero dependencies, vanilla JS — no framework, no build step
• Shadow DOM UI — your CSS can't break the widget; the widget can't break your page

The annoying parts it handles

These are the things that make "just use a speech API" a multi-week project:

Framework-safe text insertion

Setting input.value = text silently breaks React and Vue controlled inputs — the framework never sees the change. The widget uses the native prototype setter plus a synthetic input event, inserted at the cursor:

const setter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype, "value").set;
setter.call(field, next);
field.dispatchEvent(new Event("input", { bubbles: true }));

So onChange, v-model, and Svelte bindings just work.

Cross-browser recording

Chrome and Firefox record WebM/Opus; iOS Safari records MP4/AAC. The widget detects support via MediaRecorder.isTypeSupported and the backend accepts both natively (with an ffmpeg fallback for anything malformed).

Listening feedback

While recording, a ring around the button expands with the speaker's live voice level (WebAudio analyser, fast attack / slow decay), with a CSS pulse fallback where WebAudio isn't available. Users never wonder "is it hearing me?"

Graceful failure

No key, out of credits, rate-limited, mic denied — every failure shows on the button itself and never throws into your page.

Configuration

Everything is a data-attribute on the script tag — no JavaScript required:

| Attribute | Default | Description | |---|---|---| | data-key | — (required) | Your publishable key (pk_live_…) | | data-target | all text fields | CSS selector(s) for which fields get a mic | | data-theme | light | light or dark | | data-position | inside-right | inside-right or inside-left (RTL-friendly) | | data-language | auto | ISO code or auto |

Per-field opt-in: <input data-sleekio="true">

JS API

Sleekio.attach("#comment-box", {
  theme: "dark",
  onResult: (text, meta) => console.log(text, meta.language, meta.duration),
});
Sleekio.rescan(); // after injecting new DOM (SPAs are auto-observed too)

Security model

The key is publishable (like a Stripe pk_) — safe in page source. Protection is layered: per-key domain allowlist, per-key and per-day rate caps, and one-click key rotation from the dashboard.

Privacy

Audio is processed in memory, transcribed, and immediately discarded — never stored, never used for training.

Who's behind this

The widget runs on the same production backend as the Sleekio Chrome extension (voice dictation for Gmail, LinkedIn, Docs and every other text box — 4.6★ on the Chrome Web Store) — the codec handling and insertion tricks here were battle-tested there first. Transcription is powered by Whisper-class models behind a provider-fallback chain.

Questions, bugs, feature requests: open an issue or email [email protected].

License

The widget client in this repo is MIT licensed. The Sleekio transcription API it talks to is a hosted service — pricing.