Embedded Modes

Four different layout patterns for embedding the widget

Sidebar layoutFull pageModal overlayInline

Choose a Layout Demo

Explore four different ways to embed the chat widget into your application. Each layout demonstrates different use cases and integration patterns.

Embedded Mode Configuration

When using embedded mode, the widget adapts to its container. Key configuration:

window.NexusChatWidget.init(
  {
    embedded: true,  // REQUIRED: Enables embedded mode
    experienceId: "your-experience-id",
    apiUrl: "undefined",
    theme: "light",

    window: {
      header: {
        show: true,
        showCloseButton: false,  // Usually hidden in embedded
        showSizeToggle: false,   // Not needed in embedded
      }
    }
  },
  containerElement  // Pass the DOM element as second parameter
);