Embedded Mode: the widget as a page element

In embedded mode the widget becomes an element like any other. It fills a container you define: portals, intranets, web apps.

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

Three things matter:

• Turn auto-render off first (zEMessenger.autorender = false), or the floating bubble also shows up. Embedded and floating must never be mixed.
• The container has to exist and have dimensions before render runs. The widget fills it completely; size and placement are your CSS.
• Render options are one-shot. A second render call duplicates the widget, and there is no un-render. Changing options means reloading the page.

Hiding the header

For surfaces that already carry a title of their own:

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

The cost: back navigation and channel switching inside the widget go with it.

Passing context

The demo holds the same command you would use to tag a real conversation before it even exists:

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

On the real widget, the tags land on the ticket. The team sees at a glance which page the request came from. The same idea carries product pages (“which product?”), portals (“which section?”), or business rules that react to the tags.