JS API & externe Buttons

Mit der öffentlichen Widget-API kannst du eigene Buttons auf deiner Website nutzen, um Chat oder Lead-Formular gezielt zu öffnen.

Verfügbare Methoden

• window.LedianWidget.open() opens chat.
• window.LedianWidget.openLeadForm(options?) opens the contact form (if lead capture is enabled).

Wichtige Hinweise

• Der Widget-Script-Tag muss geladen sein, bevor die API verfügbar ist.
• openLeadForm gibt false zurück, wenn Lead-Erfassung deaktiviert ist.
• Wenn das Widget noch nicht gebootstrapped ist, wird beim Aufruf zuerst eine Session initialisiert.
• prefill akzeptiert nur ein Objekt mit String-Werten; ungültige Werte werden verworfen.

Beispiel: Plain HTML / Vanilla JS

<script src="https://api.ledian.io/widget.js" data-wid="WID_..." data-sid="SID_..." defer></script>
<button id="open-chat">Chat öffnen</button>
<button id="open-lead">Kontaktformular öffnen</button>
<script>
  document.getElementById("open-chat")?.addEventListener("click", () => {
    window.LedianWidget?.open?.();
  });

  document.getElementById("open-lead")?.addEventListener("click", async () => {
    const opened = await window.LedianWidget?.openLeadForm?.({
      prefill: { message: "Ich hätte gerne eine Beratung." }
    });

    if (opened === false) {
      console.warn("Lead-Erfassung ist im Widget aktuell deaktiviert.");
    }
  });
</script>

Beispiel: React / Next.js

In Next.js kannst du den Helper aus frontend/lib/widgetApi.ts verwenden.

"use client";

import { openWidget, openWidgetLeadForm } from "@/lib/widgetApi";

export function HeroActions() {
  return (
    <div className="flex gap-3">
      <button type="button" onClick={() => openWidget()}>
        Chat öffnen
      </button>
      <button
        type="button"
        onClick={async () => {
          const opened = await openWidgetLeadForm({
            prefill: { message: "Bitte ruft mich zurück." },
          });
          if (opened === false) {
            // Lead-Erfassung ist deaktiviert oder API noch nicht bereit
          }
        }}
      >
        Kontaktformular öffnen
      </button>
    </div>
  );
}