ClientAPI – Dokumentation

Überblick

Die melibo ClientAPI ermöglicht die direkte Interaktion mit dem melibo Chat-Widget über JavaScript. Sie wird clientseitig im Browser verwendet und erlaubt es, das Widget zu öffnen/schließen, Chats zu starten, Variablen zu setzen sowie Sprache und Konfiguration dynamisch anzupassen.

Typische Use Cases:

• Programmgesteuertes Öffnen des Widgets (z. B. nach Klick oder Event)

• Starten bestimmter Chatflows

• Übergabe von Nutzer- oder Kontextdaten

• Dynamische Anpassung von Sprache und Design

• Entfernen bestimmter UI-Elemente aus dem Chat

---

Voraussetzungen

• Das melibo Widget ist korrekt auf der Website eingebunden

• window.melibo ist verfügbar

• Aufrufe erfolgen nach dem Laden des Widgets

Beispiel:

<script>
  window.melibo.openWidget();
</script>

---

ClientAPI – Funktionsübersicht

Funktion	Beschreibung
openWidget()	Öffnet das Widget
closeWidget()	Schließt das Widget
removeElementById(id)	Entfernt ein HTML-Element aus dem Chat
triggerChat(chatId, message)	Startet einen Chat mit Nachricht
setVariables(variables)	Setzt Session-Variablen
setLanguage(lang)	Wechselt die Widget-Sprache
setConfig(config)	Aktualisiert die Widget-Konfiguration

---

Funktionen im Detail

melibo.openWidget()

Beschreibung Öffnet das melibo Widget, falls es aktuell geschlossen ist.

Verwendung

window.melibo.openWidget();

Typische Anwendungsfälle

• Klick auf einen „Hilfe“-Button

• Automatisches Öffnen nach bestimmtem Event

• Proaktive Chat-Trigger

---

melibo.closeWidget()

Beschreibung Schließt das melibo Widget, falls es geöffnet ist.

Verwendung

window.melibo.closeWidget();

---

melibo.removeElementById(id)

Beschreibung Entfernt ein HTML-Element innerhalb der Chat-Nachrichten anhand seiner ID.

Parameter

Name	Typ	Beschreibung
id	string	ID des zu entfernenden Elements

Verwendung

window.melibo.removeElementById('promo-banner');

Hinweis Nützlich für:

• Entfernen von Kampagnen-Bannern

• Dynamisches UI-Cleanup

• A/B-Tests

---

melibo.triggerChat(chatId, message)

Beschreibung Sendet eine Nachricht an einen bestimmten Chatflow und öffnet das Widget automatisch.

Parameter

Name	Typ	Beschreibung
chatId	string	ID des Ziel-Chats
message	string	Startnachricht

Verwendung

window.melibo.triggerChat(
  'support-chat',
  'Hallo, ich habe eine Frage zu meiner Bestellung'
);

Best Practice

• Ideal für CTAs wie „Jetzt Hilfe erhalten“

• Kann mit User-Events kombiniert werden (z. B. Warenkorb)

---

melibo.setVariables(variables)

Beschreibung Setzt benutzerdefinierte Variablen für die aktuelle Chat-Session. Diese Variablen stehen in Chatflows, Bedingungen und Integrationen zur Verfügung.

Parameter

Name	Typ	Beschreibung
variables	Record<string, unknown>	Key-Value-Objekt

Verwendung

window.melibo.setVariables({
  userId: '12345',
  userType: 'premium',
  loggedIn: true
});

Use Cases

• Personalisierte Antworten

• Routing zu bestimmten Flows

• CRM- oder Shop-Kontext übergeben

---

melibo.setLanguage(lang)

Beschreibung Setzt die Sprache des Widgets und lädt die Konfiguration neu.

Parameter

Name	Typ	Beschreibung
lang	string	Sprachcode (z. B. de, en)

Verwendung

window.melibo.setLanguage('de');

Hinweis

• Die Sprache muss im Widget konfiguriert und aktiviert sein

• Ideal bei mehrsprachigen Websites

---

melibo.setConfig(config)

Beschreibung Aktualisiert die Widget-Konfiguration zur Laufzeit.

Parameter

Name	Typ	Beschreibung
config	Partial<Config>	Teilweise Widget-Konfiguration

Verwendung

window.melibo.setConfig({
  primaryColor: '#ff5733',
  secondaryColor: '#3e2f59',
  name: 'Support Bot',
  languages: ['de', 'en'],
  privacy: {
    active: true,
    text: 'Ihre Privatsphäre ist uns wichtig.'
  },
  feedback: {
    enabled: true,
    text: 'Wie war Ihre Erfahrung?'
  }
});

Typische Anpassungen

• CI-Farben

• Bot-Name

• Datenschutz-Hinweise

• Feedback-Funktionen

• Custom CSS

---

Technische Schnittstellen

ClientAPI Interface

export interface ClientAPI {
  openWidget: () => void;
  closeWidget: () => void;
  removeElementById: (id: string) => void;
  triggerChat: (chatId: string, message: string) => void;
  setVariables: (variables: Record<string, unknown>) => void;
  setLanguage: (lang: string) => void;
  setConfig: (config: Partial<Config>) => void;
}

---

Config Interface

export interface Config {
  primaryColor: string;
  secondaryColor: string;
  avatarIcon: string;
  toggleIcon: string;
  customCSS: string;
  languages: string[];
  name: string;
  privacy: {
    active: boolean;
    text: string;
  };
  feedback: {
    enabled: boolean;
    text: string;
  };
}

---

Zusätzliche Referenzen

Für weiterführende Anpassungen und Styling-Optionen:

• Custom CSS → CustomCSS – melibo Entwicklerdokumentation

• Mehrere Widget-Designs & JS-Styling → Anpassung von Widget-Stilen mit JavaScript

Diese Artikel zeigen:

• Erweiterte CSS-Anpassungen

• Mehrere Widget-Varianten

• Dynamische Design-Wechsel

---

Best Practices

• setVariables() vor triggerChat() aufrufen

• Widget-Aufrufe erst nach vollständigem Laden ausführen

• Farben & Sprache möglichst zentral steuern

• Für Proaktiv-Chats triggerChat() verwenden statt openWidget()