React component

Widget and message in React applications – one file, no dependencies apart from React.

For React projects (Next.js, Vite, Create React App …) there is a ready-made component – a single file that you copy into your project. Download: speeeak.io/einbetten → “React component”.

Including it#

import { SpeeeakWidget, SpeeeakNachricht } from './SpeeeakWidget';

export function Kontakt() {
  return (
    <>
      <h2>Leave me a voice message</h2>
      <SpeeeakWidget schluessel="w…" breite="640px" />

      <h2>My welcome message</h2>
      <SpeeeakNachricht kennung="…" breite="720px" />
    </>
  );
}

The component renders an iframe and adjusts its height automatically (Speeeak reports it via postMessage; only messages from speeeak.io are accepted).

Floating displays in React#

Pill, popup, tab and round button come from the embed script. Load it once and set the attributes – for example in a useEffect:

useEffect(() => {
  const s = document.createElement('script');
  s.src = 'https://speeeak.io/js/widget.js'; s.async = true;
  s.dataset.widget = 'w…'; s.dataset.art = 'popup'; s.dataset.text = 'Leave a message'; s.dataset.farbe = '#6751df';
  document.body.appendChild(s);
  return () => s.remove();
}, []);

All attributes: Displays.