Skip to main content
Get your first chat interface running in just a few minutes. This guide walks you through the fastest path from installation to a working chat.
WireChat is currently in beta. While it’s functional and feature-rich, it’s not recommended for production use. Please report any issues to help accelerate progress toward a stable release.

​
Prerequisites

Before starting, ensure you’ve completed the Installation steps:
  • WireChat package installed via Composer
  • Migrations run
  • Default Panel Provider created
  • User model implements WirechatUser contract

​
Choose Your Integration Method

WireChat offers two main integration approaches:

Widget Mode

Floating chat button that opens a modal - perfect for adding chat to existing pages

Full Page Mode

Dedicated chat pages with full routing - ideal for standalone chat applications

​
Widget Mode

The fastest way to add chat to your application is using the widget component.
1

Add widget to your layout

Add the widget component to your Blade layout where you want the chat button to appear:
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Application</title>
    
    {{-- Livewire Styles --}}
    @livewireStyles
    
    {{-- WireChat Styles --}}
    @wirechatStyles
</head>
<body>
    {{-- Your app content --}}
    <div>
        @yield('content')
    </div>
    
    {{-- Livewire Scripts --}}
    @livewireScripts
    
    {{-- WireChat Assets (includes widget) --}}
    @wirechatAssets
</body>
</html>
The @wirechatAssets directive automatically includes the widget component for authenticated users.
2

Test the widget

Navigate to any page in your application and look for the floating chat button in the bottom-right corner. Click it to open the chat interface!
The widget automatically detects your default panel configuration and uses those settings for colors, permissions, and features.

​
Full Page Mode

For a dedicated chat experience, use WireChat’s full-page components.
1

Use the default routes

WireChat automatically registers routes based on your panel configuration. By default:
  • /chat - Chat list (conversations)
  • /chat/{conversationId} - Individual conversation view
Users can navigate directly to these routes.
2

Add navigation links

Add links to the chat pages in your navigation:
navigation.blade.php
<nav>
    <a href="/">Home</a>
    <a href="/chat">Messages</a>
    <a href="/profile">Profile</a>
</nav>
3

Customize the path (optional)

You can customize the route path in your Panel Provider:
app/Providers/ChatsPanelProvider.php
public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('default')
        ->path('messages'); // Changes route to /messages
}

​
Configure User Permissions

Control who can access chat features by implementing the WirechatUser interface methods in your User model:
Allow all authenticated users to use chat:
app/Models/User.php
public function canCreateGroups(): bool
{
    return true;
}

public function canCreateChats(): bool
{
    return true;
}

public function canAccessWirechatPanel(Panel $panel): bool
{
    return true;
}

​
Start Chatting

That’s it! Your users can now:
  1. Start private chats - Click “New Chat” and select a user
  2. Create groups - Click “New Group” to create group conversations
  3. Send messages - Type and send text messages
  4. Share files - Upload and share attachments (if enabled)
  5. Search conversations - Find chats by user name or content

​
Next Steps

Enable Broadcasting

Add real-time message delivery with Laravel Echo

Configure Attachments

Set up file uploads and media sharing

Customize Colors

Match your brand with custom color schemes

Set Up Notifications

Enable web push notifications for new messages

​
Troubleshooting

Make sure you:
  1. Added @wirechatAssets to your layout
  2. Are logged in (widget only shows for authenticated users)
  3. Your user has permission via canAccessWirechatPanel()
Check that:
  1. Your panel is registered in the ChatsPanelProvider
  2. The panel is set as default() or you’re using the correct path
  3. Middleware allows access to the routes
Verify that:
  1. canCreateChats() returns true for your user
  2. You’ve configured searchUsersUsing() in your panel to find other users
  3. Database migrations have been run
For more troubleshooting help, see the Troubleshooting Guide.