For React, Next.js and Vue
A recording widget
as a component.
In an app that assembles its own pages, a bare script tag in JSX never runs. That’s why Speeeak ships a ready-made React component – four props and you’re done. For Vue, Svelte and everything else, an iframe or the script line in your HTML shell does the job.
Real example site with a real widget – try it. Whatever you record here only reaches us and is never published. Open at full size
Why a component instead of a script tag
A <script> in JSX is never executed by the browser. The SpeeeakWidget component renders an iframe with microphone permission instead and adjusts its height to the content automatically.
schluessel (key), breite (width), farbe (colour), datenschutz (privacy URL). Everything else – fields, consent text, thank-you text – lives in your Speeeak account and changes without a redeploy.
The recording goes straight from the visitor’s browser to Speeeak. Your app needs no upload endpoint, no audio processing, no storage. The message sits in your Speeeak Inbox.
How to add it
- Create a widget and copy the key. In your Speeeak account under “Widgets”, create a widget and copy the widget key. It starts with
wand is 16 characters long. - Drop in the component. Put
SpeeeakWidget.jsxfrom the docs (docs.speeeak.io/react) into your project and use it:<SpeeeakWidget schluessel="YOUR-KEY" farbe="#6751df" />. For the floating styles (pill, tab, round button) put the script line from Speeeak into your HTML shell instead –public/index.html, or_document/layoutin Next.js. Vue, Svelte and friends: an<iframe src="https://speeeak.io/w/YOUR-KEY" allow="microphone">does the same as the component. - Allow your domain. In Speeeak, add your app’s domain under “Allowed websites” – including the staging or preview domain if you want to test there. Without the entry the widget won’t accept messages.
Tip: On
http://localhostthe browser grants microphone access. On any other host the page needshttps://, otherwise the browser won’t even ask for the microphone.
Use this template
Texts, fields, colour and display style are prepared – adjust name and colour, copy one line of code into your website, done.
Take the template into my account Step-by-step setup
Free account: 1 widget with Speeeak link. Pro: 5 widgets, Speeeak link can be switched off.
What you do with it
- Feedback inside the app: a microphone on the settings or help page – “What’s missing for you?” beats a star-rating dialog.
- Support without a ticket form: users describe their problem in 30 seconds of speech, you hear what’s really going on and reply by voice via the listen link.
- Onboarding voices: after the first few days, ask new users how it went – with consent to publish it as a testimonial.
- API: with Business (€49/month) you fetch messages via the API or get notified by webhook – so the voice also lands in your own system.
Frequently asked questions
Do I have to install anything from npm?
No. The component is a single JSX file without dependencies. Copy, import, done. TypeScript projects rename it to .tsx and add the prop types.
Does it work with server-side rendering?
Yes. The component renders an iframe, which needs no window object on the first pass. The height adjustment only runs in the browser.
Can I customise the look?
Colour and width via props, style and texts in your Speeeak account. Your CSS doesn’t reach inside the iframe – on purpose, so the widget stays usable everywhere.
What does it cost?
Free: one widget for one website with Speeeak link, 30 messages per month. Pro (€19/month): five widgets, transcription, Speeeak link can be switched off. Business (€49/month) adds API and webhooks.
React, Next.js, Vue and Svelte are trademarks of their respective owners. Speeeak is not affiliated with these providers.