Embedded-Modus: der Chat im Container oder im Vollbild

Wann du ihn nutzt

Nutze den Embedded-Modus, wenn der Chat der Inhalt eines Bildschirms ist und kein Button darüber:

• Eine WebView in deiner Mobile-App, zum Beispiel hinter einem Eintrag Kontakt-Support. Die Deskwoot App auf dem Handy nutzt den Embedded-Modus auf ihrem eigenen Support-Bildschirm.
• Eine ganzseitige Kontaktseite auf deiner Website.
• Ein Modal oder ein Panel mit eigenem Rahmen.

Willst du nur die Bubble ausblenden und den normalen schwebenden Chat über deinen eigenen Button öffnen, brauchst du den Embedded-Modus nicht. Wie das geht, zeigt Das Chat-Widget über deinen eigenen Button öffnen.

Was sich im Embedded-Modus ändert

• Der Chat öffnet sich, sobald die Seite lädt, und füllt seinen Container, oder den ganzen Bildschirm, wenn es keinen Container gibt.
• Die runde Chat-Bubble, die Nachrichten, die durch deine Chat-Trigger aufpoppen, und der Schließen-Button des Chats sind ausgeblendet. Deine Seite oder App entscheidet, wie Leute zum Chat kommen und wie sie ihn verlassen.
• Der Chat hat keinen Schatten, keine runden Ecken und keine 20px Abstand zum Rand.
• Farben, helles oder dunkles Design und die Begrüßungstexte kommen weiter aus den Einstellungen deines Posteingangs, genau wie beim schwebenden Chat.
• Die JavaScript-API funktioniert weiter: window.deskwoot.close() blendet den Chat aus, und open() oder toggle() zeigt ihn wieder.

Einrichten

1. Geh zu Einstellungen > Posteingänge, öffne deinen Live-Chat-Posteingang und klicke auf Auf deiner Website. Klicke unter So baust du den Chat ein auf Kopieren.
2. Ergänze im Code embedded: true in window.deskwootSettings, neben deinem widgetToken.
3. Soll nur ein Teil der Seite gefüllt werden, ergänze auch container. Die Option nimmt einen CSS-Selektor wie "#support-pane" oder das Element selbst. Gib diesem Element eine Höhe.
4. Füge den Code auf der Seite ein, auf der der Chat erscheinen soll, am besten direkt vor dem schließenden </body>-Tag. Setz das Container-Element darüber, damit es schon auf der Seite ist, wenn das Widget startet.

Beispiele

Vollbild, für eine Kontaktseite oder eine WebView in einer App

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN",
    embedded: true
  };
  (function (d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.src = "https://deskwoot.com/widget/deskwoot-loader.js";
    g.async = true;
    g.defer = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

Ohne container bedeckt der Chat das ganze Browserfenster.

In einem Container auf deiner Seite

<div id="support-pane" style="height: 600px"></div>

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN",
    embedded: true,
    container: "#support-pane"   // leave out to fill the whole viewport
  };
  (function (d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.src = "https://deskwoot.com/widget/deskwoot-loader.js";
    g.async = true;
    g.defer = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

Der Chat füllt die volle Breite und Höhe des Elements, das Element braucht also eine eigene Höhe.

Dein eigener Button zum Zeigen und Ausblenden

<button onclick="window.deskwoot.toggle()">Contact Support</button>

Der Embedded-Modus hat keinen Schließen-Button, mit einem Button wie diesem können Leute den Chat also ausblenden und wieder holen. Nimm open() statt toggle(), wenn der Button ihn nur zeigen soll. window.__deskwootUnread enthält die Zahl der neuen Antworten von deinem Team oder deinem KI-Bot, die eingetroffen sind, während der Chat ausgeblendet war. Damit kannst du ein Badge an deinem Button anzeigen.

Gute Stellen für den Button: ein Eintrag Kontakt-Support in deiner Navigation, neben Einstellungen oder Hilfe (so macht es Deskwoot), eine Zeile Mit Support chatten ganz oben in deinem Hilfe- oder Konto-Menü, oder ein kleiner schwebender Button in der Ecke, wenn deine App keine dauerhaft sichtbare Navigationsleiste hat. Setz ihn auf jeder Seite hinter deinem Login an dieselbe Stelle, damit Leute immer wissen, wo der Support ist.

Häufige Fragen

Kann ich den Embedded-Modus im Dashboard einschalten?

Nein. Der Embedded-Modus wird nur im Widget-Code auf deiner Seite gesetzt. Das Aussehen des Chats, etwa Farben, Design und Begrüßungstexte, stellst du weiter in den Einstellungen deines Posteingangs ein. Mehr dazu in Dein Chat-Widget anpassen.

Der Chat erscheint nicht in meinem Container. Was sollte ich prüfen?

Das Element muss auf der Seite sein, wenn das Widget startet. Findet Deskwoot es nicht, lädt der Chat gar nicht (er weicht nicht auf Vollbild aus), und die Browser-Konsole zeigt [deskwoot] embedded container not found. Prüf außerdem, ob das Element eine Höhe hat, denn der Chat nimmt 100% davon ein.

Können Besucher den Chat schließen?

Der Embedded-Modus hat keinen Schließen-Button. Deine Seite entscheidet: window.deskwoot.close() blendet den Chat aus, und open() oder toggle() zeigt ihn wieder.

Funktioniert der Embedded-Modus mit der Nutzer-Verifizierung?

Ja. Setz das user-Objekt in dasselbe window.deskwootSettings, neben embedded: true. Wie du es signierst, steht in Nutzer-Verifizierung für eingeloggte Kunden.

Kann ich auf manchen Seiten die Bubble zeigen und auf anderen den eingebetteten Chat?

Ja. Der Embedded-Modus wird im Code jeder Seite gesetzt. Seiten mit embedded: true zeigen den Chat in der Seite, Seiten ohne die Option zeigen den Chat wie gewohnt.

Wo lese ich mehr über die Optionen?

Alle Widget-Optionen und die JavaScript-API stehen in der Widget-Dokumentation.