Chat in eine Gäste-App einbinden

Für die Einbindung des Webchats in eine gästeseitige Web-App (z. B. eine PWA oder eine in der App eingebettete Webansicht) verwendest du das Webchat-SDK. Es bietet das vollständige Widget-Verhalten und programmatische Steuerung über Methoden und Events.

Voraussetzungen

Client-ID deiner App. Du findest sie im DialogShift-Dashboard. Zum Entwickeln und Testen kannst du die Demo-Client-ID pro12bd verwenden.
Channel-Code der Quelle. Für eine Gäste-App muss exakt pwa-guestapp gesetzt werden. Über den Channel-Code ordnen wir die Konversationen der richtigen Quelle zu.

Der Channel-Code kann nicht frei gewählt werden. Für eine Gäste-App ist exakt pwa-guestapp zu setzen. Weitere Channel-Codes nur in Absprache mit dem DialogShift Support.

Einbindung per SDK

Das SDK rendert den Toggle-Button und das Chatfenster, lädt den Chat in einem iframe und stellt Methoden zur Steuerung bereit. Es ist als UMD- und ES2015-Bundle verfügbar.

SDK installieren

npm i dialogshift-webchat-sdk --save

<script
  type="text/javascript"
  src="https://cdn.dialogshift.com/sdk/latest/dialogshift-webchat-sdk.umd.js"></script>

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.dialogshift.com/sdk/latest/dialogshift-webchat-sdk.min.css"/>

Chat initialisieren

Setze deine Client-ID als id und den Channel-Code über context.channel. Das Beispiel verwendet die Demo-Client-ID pro12bd.

import * as Dialogshift from 'dialogshift-webchat-sdk'
import 'dialogshift-webchat-sdk/bundles/dialogshift-webchat-sdk.min.css'

const chat = Dialogshift.instance({
  id: 'pro12bd',
  locale: 'de',
  context: {
    channel: 'pwa-guestapp',
    email: 'gast@example.com',
    name: 'John Doe',
  },
})

Dialogshift.instance() liefert eine Singleton-Instanz: Ein erneuter Aufruf ohne Argumente gibt dieselbe Instanz zurück.

Wichtige Optionen

Option	Typ	Beschreibung
id	string	Client-ID aus dem Dashboard.
locale	string	Sprache des Chats. Standard: `en`.
position	’left’ \| ‘right’	Position auf der Seite. Standard: `right`.
isChatboxVisible	boolean	Öffnet das Chatfenster direkt, wenn `true`. Standard: `false`.
renderButton	boolean	Rendert den Toggle-Button. Wird er nicht gerendert, lässt er sich später nicht mehr ein- oder ausblenden. Standard: `true`.
initialElement	string	Element, das beim ersten Öffnen des Chats automatisch ausgelöst wird, z. B. eine Begrüßungsnachricht.
context	object	Kontextvariablen für den Besucher (u. a. `channel`).

Vollbild-Einbindung: nur der Chat

Der häufigste Fall in einer Gäste-App: Die Ansicht soll ausschließlich den Chat zeigen, ohne schwebenden Button. Rendere dafür den Button nicht und öffne das Chatfenster direkt.

const chat = Dialogshift.instance({
  id: 'pro12bd',
  locale: 'de',
  renderButton: false,
  isChatboxVisible: true,
  initialElement: 'welcome-message',
  context: {
    channel: 'pwa-guestapp',
  },
})

Über initialElement wird beim Öffnen automatisch das angegebene Element ausgelöst – der Gast sieht direkt eine Begrüßungsnachricht.

Lebenszyklus: `init` und `ready`

Das SDK feuert zwei zentrale Events:

init feuert, sobald die Widgets gerendert sind und die Konfiguration geladen ist. Ab jetzt kannst du API-Methoden aufrufen, aber noch keine Nachrichten auslösen.
ready feuert, sobald der Chat mit dem Nachrichtenkanal verbunden ist. Die Verbindung wird erst aufgebaut, wenn das Chatfenster zum ersten Mal geöffnet wird – bleibt es geschlossen, feuert ready nicht.

Steuerung zur Laufzeit

const chat = Dialogshift.instance()

// Auf Verbindung warten, bevor du Nachrichten triggerst
chat.on('ready', () => {
  chat.triggerElement({ successor: 'welcome-message' })
})

// Chatfenster öffnen – baut beim ersten Mal die Verbindung auf
chat.showChatbox()

// Kontext nachträglich setzen
chat.setContext('currentUser', { firstName: 'John', lastName: 'Doe' })

// Instanz abbauen (z. B. beim Verlassen der Ansicht)
chat.destroy()

Weitere Methoden und Events

Das SDK bietet darüber hinaus Methoden für Teaser, Button-Text, Ungelesen-Zähler und Themes sowie Events für gesendete und empfangene Nachrichten. Die vollständige API-Referenz findest du im GitHub-README des Webchat-SDK, das Widget-Verhalten zeigt die SDK-Demo live.

Übersicht

Onboarding

Basiseinstellungen

Agenten

DialogShift Services

Voraussetzungen

Einbindung per SDK

Wichtige Optionen

Vollbild-Einbindung: nur der Chat

Lebenszyklus: `init` und `ready`

Steuerung zur Laufzeit

Weitere Methoden und Events

​Voraussetzungen

​Einbindung per SDK

​Wichtige Optionen

​Vollbild-Einbindung: nur der Chat

​Lebenszyklus: init und ready

​Steuerung zur Laufzeit

​Weitere Methoden und Events

Voraussetzungen

Einbindung per SDK

Wichtige Optionen

Vollbild-Einbindung: nur der Chat

Lebenszyklus: `init` und `ready`

Steuerung zur Laufzeit

Weitere Methoden und Events