Funktionen Preise FAQ Dokumentation
Log in

Dokumentation

Account

Account erstellen

Um Kochmodus auf deiner Website nutzen zu können, benötigst du zunächst ein kostenloses Konto. Damit erhältst du Zugang zum Dashboard, in dem du dann deinen API-Token generierst und deine erlaubten Domains verwaltest.

So geht's

  1. Registrieren: Erstelle unter Konto erstellen ein Konto mit deinem Namen, deiner E-Mail-Adresse und einem Passwort.
  2. E-Mail bestätigen: Klicke auf den Bestätigungslink, den du per E-Mail erhältst, um dein Konto zu verifizieren.
  3. Token generieren: Navigiere im Dashboard zu Token und klicke auf „Token generieren". Diesen Token brauchst du für die Einbindung des Widgets.
  4. Domain registrieren: Trage die Domain(s) ein, auf denen du Kochmodus einsetzen möchtest. Pro Plan kannst du eine bestimmte Anzahl an Produktiv- und Test-Domains hinterlegen.

Sobald Token und Domain eingerichtet sind, kannst du mit der technischen Integration beginnen.

📌 Du nutzt WordPress? Spring direkt zur Integration mit unserem WordPress-Plugin. Das Plugin übernimmt Script-Tag und Button-Einbindung für dich.

Technische Integration

Script-Tag einbinden

Binde das Kochmodus-Widget als ES-Modul in den "<head>" oder vor dem schließenden </body>-Tag deiner Rezeptseite ein.

HTML 
<script
    type="module"
    src="https://kochmodus.de/build/assets/kochmodus-widget.js">
</script>

Erklärung der Attribute

  • type="module" Aktiviert ES-Module-Unterstützung. Ermöglicht Import/Export, Scoped Execution und bessere Performance.
  • src="..." URL zur Kochmodus-Widget-Script-Datei. Ohne, dass dieses Script geladen ist, sind alle weiteren Funktionen nicht verfügbar.

Kochmodus-Button einbinden

Mit diesem HTML-Snippet wird an der Stelle, an der ihr es bei euch im DOM einbindet, der Button zum Starten des Kochmodus gerendert. Wichtig ist, dass das Kochmodus-Widget-Script geladen sein muss, um den Button zu aktivieren.

Wenn euch die CSS-Einstellungen nicht passen, könnt ihr sie mit eigenen CSS-Anweisungen überschreiben.

HTML 
<kochmodus-button
  label="open kochmodus"
  data-kochmodus-recipe-uri="YOUR_RECIPE_URI"
  data-kochmodus-access-token="YOUR_ACCESS_TOKEN">
</kochmodus-button>

Erklärung der Attribute

  • label Text, der im Button angezeigt wird. Kann frei angepasst werden (z. B. „Kochmodus starten").
  • data-kochmodus-access-token Authentifizierungs-Token für dein Projekt oder deine Website. Wird benötigt, um Zugriffe zu autorisieren und das Widget zu starten.
  • data-kochmodus-recipe-uri (optional) Öffentliche URL der Rezeptseite. Standardmäßig wird die aktuelle Browser-URL genutzt. Von hier werden die JSON-LD Rezeptdaten serverseitig geladen und aufbereitet für den Kochmodus.

⚠️ WICHTIG: Voraussetzung ist, dass deine Rezeptseiten valide Schema.org JSON-LD-Rezeptdaten enthalten.

Kochmodus manuell per JavaScript starten (ohne Button)

Falls du keinen statischen <kochmodus-button> verwenden möchtest (z. B. eigenes UI, Custom CTA), kannst du den Kochmodus programmatisch öffnen:

JavaScript 
window.dispatchEvent(
    new CustomEvent('kochmodus:open', {
        detail: {
            recipeUri: YOUR_RECIPE_URI,
            accessToken: YOUR_ACCESS_TOKEN,
        },
    })
);

Erklärung der Attribute

  • kochmodus:open Globaler CustomEvent-Name, welcher das Kochmodus-Widget öffnet. Kann von überall im DOM ausgelöst werden.
  • detail.recipeUri URI, von der das Rezept geladen werden soll. Standardmäßig die aktuelle Browser-URL.
  • detail.accessToken Authentifizierungs-Token für dein Projekt oder deine Website. Wird benötigt, um Zugriffe zu autorisieren und das Widget zu starten.

WordPress

WordPress-Plugin verwenden

Statt Script-Tag und Button-HTML selbst zu pflegen, kannst du auf WordPress-Seiten unser offizielles Plugin installieren. Es liefert einen Gutenberg-Block und einen Shortcode, lädt das Widget-Skript nur auf Seiten mit Button und übernimmt die gesamte technische Integration.

Installation

  1. Plugin-Verzeichnis: Im WordPress-Admin unter Plugins › Installieren nach „Kochmodus" suchen, Jetzt installieren und Aktivieren klicken.
  2. ZIP-Upload: Lade dir die aktuelle kochmodus.zip aus den GitHub Releases herunter und installiere sie unter Plugins › Installieren › Plugin hochladen.
  3. Composer: Für Composer-verwaltete Setups (z. B. Bedrock): composer require flowd/kochmodus-wordpress-plugin, danach im Admin aktivieren.

Konfiguration

Nach der Aktivierung findest du im WordPress-Admin unter Einstellungen › Kochmodus ein Feld für deinen Access-Token. Den Token bekommst du in deinem Kochmodus-Dashboard unter Token.

Verwendung: Gutenberg-Block

Im Block-Inserter „Kochmodus Button" auswählen. In der Block-Sidebar lassen sich folgende Werte setzen:

  • Button-Label Text auf dem Button. Standard: „Kochmodus starten".
  • Recipe URI Optional. Leer lassen, um die aktuelle Seiten-URL zu verwenden.
  • Farben Hintergrund-, Hover- und Textfarbe. Werden als CSS-Variablen auf das Web-Component gesetzt.

Verwendung: Shortcode

Alternativ kann der Button per Shortcode in Beiträge oder Seiten eingefügt werden. Alle Attribute sind optional. Die Minimal-Variante [kochmodus_button] verwendet die aktuelle Seiten-URL und die Standardfarben.

Shortcode 
[kochmodus_button label="Kochmodus starten" recipe_uri="https://example.com/rezept/" background_color="#3D7A5F" hover_background_color="#2F5E48" color="#FFFFFF"]
  • label Text auf dem Button.
  • recipe_uri (optional) Öffentliche URL der Rezeptseite. Ohne Angabe wird die aktuelle Browser-URL genutzt.
  • background_color / hover_background_color / color (optional) Hintergrund-, Hover- und Textfarbe als Hex-Werte. Werden als CSS-Variablen am Web-Component gesetzt.

⚠️ WICHTIG: Voraussetzung ist, dass deine Rezeptseiten valide Schema.org JSON-LD-Rezeptdaten enthalten. Das gilt auch beim Einsatz des Plugins.