Embedded mode: the chat in a container or full screen

When to use it

Use embedded mode when the chat is the content of a screen, not a button on top of it:

• A WebView in your mobile app, for example behind a Contact support item. The Deskwoot mobile app uses embedded mode on its own Contact Support screen.
• A full page Contact page on your website.
• A modal or a panel that brings its own frame.

If you only want to hide the bubble and open the normal floating chat from your own button, you do not need embedded mode. Open the chat widget from your own button shows how.

What changes in embedded mode

• The chat opens as soon as the page loads and fills its container, or the whole screen when there is no container.
• The round chat bubble, the messages that pop up from your chat triggers and the close button of the chat are hidden. Your page or app decides how people get to the chat and how they leave it.
• The chat has no shadow, no rounded corners and no 20px gap to the edge.
• Colors, the light or dark theme and the welcome texts still come from your inbox settings, the same as for the floating chat.
• The JavaScript API keeps working: window.deskwoot.close() hides the chat, and open() or toggle() shows it again.

Set it up

1. Go to Settings > Inboxes, open your live chat inbox and click On your website. Under How to add the chat, click Copy.
2. In the code, add embedded: true to window.deskwootSettings, next to your widgetToken.
3. To fill only part of the page, add container as well. It takes a CSS selector such as "#support-pane" or the element itself. Give that element a height.
4. Paste the code on the page where the chat should show, ideally just before the closing </body> tag. Put the container element above it, so it is already on the page when the widget starts.

Examples

Full screen, for a Contact page or an app WebView

<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>

Without container, the chat covers the whole browser window.

Inside a container on your page

<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>

The chat fills the full width and height of the element, so the element needs a height of its own.

Your own button to show and hide the chat

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

Embedded mode has no close button, so a button like this lets people hide the chat and bring it back. Use open() instead of toggle() if the button should only show it. window.__deskwootUnread holds the number of new replies from your team or your AI bot that arrived while the chat was hidden, for a badge on your button.

Good places for the button: a Contact Support item in your navigation next to Settings or Help (that is how Deskwoot does it), a Chat with support row at the top of your Help or Account menu, or a small floating button in the corner when your app has no navigation bar that is always visible. Put it in the same spot on every page behind your login, so people always know where support is.

Frequently asked questions

Can I turn on embedded mode in the dashboard?

No. Embedded mode is set only in the widget code on your page. The look of the chat, such as its colors, theme and welcome texts, you still set in your inbox settings. More about that in Customizing your chat widget.

The chat does not show up in my container. What should I check?

The element has to be on the page when the widget starts. If Deskwoot cannot find it, the chat does not load at all (it does not fall back to full screen), and the browser console shows [deskwoot] embedded container not found. Also check that the element has a height, because the chat takes 100% of it.

Can visitors close the chat?

Embedded mode has no close button. Your page decides: window.deskwoot.close() hides the chat, and open() or toggle() shows it again.

Does embedded mode work with identity verification?

Yes. Put the user object in the same window.deskwootSettings, next to embedded: true. How to sign it is in Identity verification for logged in customers.

Can I show the bubble on some pages and the embedded chat on others?

Yes. Embedded mode is set in the code of each page. Pages with embedded: true show the chat inside the page, and pages without it show the chat as usual.

Where can I read more about the options?

All widget options and the JavaScript API are in the widget documentation.