Zum Inhalt springen
Mignuti Chatbot
de
Kostenlos starten

Docs

Mignuti Chatbot ist eine Web Component. Wenn deine Plattform einen <script>-Tag erlaubt, kannst du Mignuti Chatbot einbetten. Unten: der 60-Sekunden-Quickstart und sechs plattform-spezifische Rezepte.

Quickstart (60 Sekunden)

  1. Registriere dich auf /signup (kostenlos, keine Kreditkarte).
  2. Der Onboarding-Wizard legt dein erstes Projekt an. Wähle ein Vertical-Template oder lade ein Dokument hoch (PDF, Word, Text …) oder füge eine URL ein.
  3. In Schritt 3 generieren wir deinen Embed-Code — eine Zeile HTML mit data-project-Attribut.
  4. Diese Zeile auf deine Seite einfügen. Reload. Der Chat-Launcher erscheint unten rechts.

Embed-Tag Anatomie

<script
  src="https://widget.mignuti.com/v1.js"
  data-project="prj_4f9c…"           // public Widget-Key
  data-secret="sec_9b21…"          // bcrypt-bound Secret
  data-consent="granted"                 // 'pending' | 'granted' | 'denied'
  async></script>
  • data-project: öffentlicher Key, darf im HTML stehen.
  • data-secret: server-seitig validiert; ohne ihn bootet das Widget nicht. Es steht — wie bei jedem Embed-Widget — im öffentlichen HTML. Die eigentliche Absicherung sind Domain-Binding, Rate-Limits und kurzlebige Session-JWTs; das Secret bindet das Embed nur eindeutig an dein Projekt.
  • data-consent: Default pending — das Widget wartet auf einen expliziten window.MignutiChatbot.setConsent('granted')-Call, bevor es Sessions startet oder localStorage schreibt. Verbinde das mit deinem Cookie-Banner (siehe Consent) — oder lass es weg: bei pending zeigt das Widget dem Besucher einen eigenen Einwilligungs-Button, bevor ein Chat startet.
  • async: nie blockierend. Das Widget wiegt rund 27 KB gzipped.

WordPress

Drei Optionen, sortiert nach Empfehlung:

1. Plugin „Mignuti Chatbot" (empfohlen)

  1. WP-Admin → Plugins → Hinzufügen → nach „Mignuti Chatbot" suchen.
  2. Installieren + aktivieren.
  3. Einstellungen → Mignuti Chatbot → data-project + data-secret einfügen.

2. Header-Footer-Injection-Plugin (Insert Headers and Footers, WPCode)

Embed-Snippet in den „Body"- oder „Footer"-Hook einfügen. Funktioniert auf jedem Theme.

3. Theme functions.php

add_action('wp_footer', function () {
  echo '<script src="https://widget.mignuti.com/v1.js" data-project="prj_…" data-secret="sec_…" async></script>';
});

Shopify

  1. Online-Shop → Themes → Code bearbeiten am aktiven Theme.
  2. layout/theme.liquid öffnen.
  3. Embed-Snippet direkt vor </body> einfügen.
  4. Speichern. Das Widget erscheint auf Shop-, Produkt-, Warenkorb- und Kollektions-Seiten.

Auf Checkout-Seiten erlaubt Shopify Scripts nur über das App-SDK (Plus-Plan). Mignuti Chatbot lädt absichtlich nicht im Checkout — Chatbots lenken bei der Conversion ab. Falls du es brauchst, meld dich bei uns.

Webflow

  1. Project Settings → Custom Code → Footer Code.
  2. Embed-Snippet einfügen.
  3. Speichern → Publish.

Auf Staging (webflow.io-Domains) musst du die Staging-URL zu „Allowed Origins" in deinen mignuti-chatbot-Embed-Einstellungen hinzufügen. Das Widget bootet nicht auf nicht-allow-listed Origins — Anti-Key-Diebstahl-Schutz.

Plain HTML / statische Sites (Astro, Hugo, Eleventy, Jekyll)

Snippet ins Layout-Template einfügen, direkt vor </body>:

<!-- in deinem <body> -->
<script src="https://widget.mignuti.com/v1.js"
  data-project="prj_…" data-secret="sec_…" async></script>
</body>

React / Next.js

Sauberstes Pattern ist ein Layout-Effect, der das Script einmal injiziert:

// app/layout.tsx (Next.js 14 App Router)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="de">
      <body>
        {children}
        <Script
          src="https://widget.mignuti.com/v1.js"
          strategy="lazyOnload"
          data-project="prj_…"
          data-secret="sec_…"
        />
      </body>
    </html>
  );
}

Warum lazyOnload: Das Widget ist nicht-kritische UI. Erst nach Window-Load laden hält Largest Contentful Paint sauber.

Vue 3 / Nuxt 3

In nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://widget.mignuti.com/v1.js',
          'data-project': 'prj_…',
          'data-secret': 'sec_…',
          async: true,
        },
      ],
    },
  },
});

Mit data-consent="pending" (Default) startet Mignuti Chatbot keine Session, bis du window.MignutiChatbot.setConsent('granted') aufrufst. Das verbindest du mit deinem Cookie-Banner-Akzeptieren-Button: 

// nachdem der Besucher Marketing-/Funktional-Cookies akzeptiert:
window.MignutiChatbot?.setConsent('granted');

// nachdem der Besucher abgelehnt hat:
window.MignutiChatbot?.setConsent('denied');  // Widget blendet sich aus

Mignuti Chatbot ist technisch ein „Funktional"-Cookie nach den meisten CMP-Kategorisierungen (speichert eine Session-ID in localStorage, damit das Gespräch über Page-Loads bestehen bleibt). DSGVO Art. 6 Abs. 1 lit. a (Einwilligung) ist die sauberste Rechtsgrundlage für B2C-Sites; B2B-Sites mit Berechtigtem-Interesse-Argument (Art. 6 Abs. 1 lit. f) funktionieren auch.

Fehlerbehebung

Meine Seite nutzt eine strikte Content-Security-Policy (CSP)

Das Widget braucht diese CSP-Freigaben — sonst lädt es zwar, aber Sessions/Antworten scheitern still: 

script-src  ... https://widget.mignuti.com;
connect-src ... https://widget.mignuti.com https://*.supabase.co;
font-src    ... https://widget.mignuti.com;
  • script-src: lädt v1.js.
  • connect-src: Chat-Session, Antwort-Stream und UI-Übersetzungen (beide Hosts nötig).
  • font-src: nur falls du in der Bot-Konfig eine eigene Schrift gewählt hast.
Der Launcher erscheint nicht
  • DevTools → Network — wird v1.js mit Status 200 geladen?
  • Console — gibt es „origin_not_allowed"-Fehler? Host zu „Allowed Origins" hinzufügen.
  • Sicherstellen, dass data-secret gesetzt ist und mit sec_ beginnt.
Bot antwortet, sagt aber oft „Das weiß ich nicht"
  • Wissensbasis prüfen — ist der Dokument-Status „bereit" (nicht „wartend"/„fehlgeschlagen")?
  • Similarity-Schwellwert in der Chatbot-Konfig prüfen (Standard 0,35) — bei knappem Inhalt leicht senken, bei irrelevanten Antworten leicht anheben.
  • Q&A-Paare für die häufigsten unbeantworteten Fragen ergänzen (siehe „Offene Fragen"-Seite).
„Bot ist am Limit"-Nachricht

Du hast die Hard-Cap erreicht (3× Plan-Limit). Plan im Billing upgraden oder bis nächsten Monat warten. Die Hard-Cap existiert, damit ein außer Kontrolle geratenes Widget dir nie 10 000 € berechnet.

Widget bricht unser Site-CSS

Kann es nicht — das Widget läuft in einem closed Shadow Root mit :host { all: initial }. Falls du CSS-Bleed siehst, schreib uns an hello@mignuti.com mit deiner URL — das wäre ein Bug, den wir wissen wollen.

Etwas, das nicht in den Docs steht?

Antwort an Werktagen innerhalb eines Arbeitstages.

hello@mignuti.com