speeeakHilfe & Dokumentation

Entwickler › React-Komponente

React-Komponente

Widget und Nachricht in React-Anwendungen – eine Datei, keine Abhängigkeiten außer React.

Für React-Projekte (Next.js, Vite, Create React App …) gibt es eine fertige Komponente – eine einzelne Datei, die du in dein Projekt kopierst. Download: speeeak.de/einbetten → „React-Komponente“.

Einbinden

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

export function Kontakt() {
  return (
    <>
      <h2>Sprich mir eine Nachricht ein</h2>
      <SpeeeakWidget schluessel="w…" breite="640px" />

      <h2>Meine Begrüßung</h2>
      <SpeeeakNachricht kennung="…" breite="720px" />
    </>
  );
}
Prop Bedeutung
schluessel Widget-Schlüssel aus dem Konto (beginnt mit w)
kennung Kennung einer Nachricht (aus „Einbetten“ bei der Nachricht)
breite Breite des Rahmens, Standard 640px bzw. 720px
style zusätzliche Inline-Styles für den Rahmen

Die Komponente rendert einen iframe und passt dessen Höhe automatisch an (Speeeak meldet sie per postMessage; es werden nur Meldungen von speeeak.de angenommen).

Schwebende Darstellungen in React

Pille, Popup, Lasche und runder Knopf kommen aus dem Einbett-Script. Lade es einmal und setze die Attribute – zum Beispiel in einem useEffect:

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

Alle Attribute: Darstellungen.