Layout

Wirechat panel routes render inside a Blade layout. The default layout is wirechat::layouts.app, but most applications replace it with the same shell used by their authenticated area.

Overriding the Default Layout

Set the panel layout to the Blade layout that should wrap the chat screen:

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        ->id('chats')
        ->layout('layouts.app'); // Your custom Blade layout
}

Setting Up Your Layout

Layouts that render Wirechat must include the Wirechat styles in the page head and the Wirechat assets before the closing body tag.

<html>
   <head>
    @wirechatStyles
   </head>
  <body>
    <div class="h-[calc(100vh_-_20rem)]">
        {{ $slot }}
    </div>
   @wirechatAssets(panel:'chats')
  </body>
</html>

@wirechatStyles injects the necessary CSS for the chat.
{{ $slot }} is where your main page content or chat interface will appear.
@wirechatAssets loads the JavaScript and Livewire directives for real-time updates.

Without a panel argument, @wirechatAssets() uses the default panel. Pass a panel ID when the layout belongs to a specific panel:

@wirechatAssets(panel: 'app')

Wrap the chat area in a container with a fixed height. This ensures messages display correctly and keeps your UI consistent.

After the layout is configured, the panel route such as /chats renders inside that Blade shell.

For embedding chat on specific pages or sections, see the Standalone Widget guide.