Deskwerk· Werkstatt

Demos

Embedded Mode: das Widget als Seitenelement

Werkstück ausprobieren →

Im Embedded Mode wird das Widget ein Element wie jedes andere. Es füllt einen Container, den du bestimmst: Portale, Intranets, Web-Apps.

<script>
  window.zEMessenger = { autorender: false };
</script>
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=DEIN_KEY"></script>
<script>
  zE('messenger', 'render', {
    mode: 'embedded',
    widget: { targetElement: '#mein-container' },
  });
</script>

Drei Dinge zählen:

  • Auto-Render vorher abschalten (zEMessenger.autorender = false), sonst erscheint zusätzlich die schwebende Blase. Embedded und Floating dürfen nie gemischt werden.
  • Der Container muss existieren und Masse haben, bevor render läuft. Das Widget füllt ihn vollständig aus; Grösse und Platzierung sind dein CSS.
  • Render-Optionen sind einmalig. Ein zweiter render-Aufruf dupliziert das Widget, rückgängig machen lässt es sich nicht. Optionen ändern heisst: Seite neu laden.

Kopfzeile ausblenden

Für Oberflächen, die selbst schon einen Titel liefern:

zE('messenger:set', 'customization', {
  widget: { hideHeader: true },
  conversationList: { hideHeader: true },
  messageLog: { hideHeader: true },
});

Der Preis: Zurück-Navigation und Kanalwechsel im Widget verschwinden mit.

Kontext mitgeben

Im Werkstück steckt derselbe Befehl, mit dem eine echte Konversation markiert würde, bevor sie entsteht:

zE('messenger:set', 'conversationTags', ['deskwerk-demo', 'werkstatt-terminal']);

Beim echten Widget landen die Tags auf dem Ticket. Das Team sieht sofort, von welcher Seite die Anfrage kommt. Dieselbe Idee trägt Produktseiten («welches Produkt?»), Portale («welcher Bereich?») oder Business-Regeln, die auf die Tags reagieren.

← Zurück zur Demo