Please enter at least 3 characters
Jul 26, 2023 • 6 min read

How to Add Chatify to Your Existing Laravel App (Laravel 11 Guide)

# How to Add Chatify to Your Existing Laravel App (Laravel 11 Guide) Adding a real-time messaging system to an existing Laravel app used to mean building everything from scratch — WebSocket server, message models, notification badges, typing indicators, the works. Then I found Chatify, a Laravel pa

Techie Mike Techie Mike
How to Add Chatify to Your Existing Laravel App (Laravel 11 Guide)

Adding a real-time messaging system to an existing Laravel app used to mean building everything from scratch — WebSocket server, message models, notification badges, typing indicators, the works. Then I found Chatify, a Laravel package from Munaf Aqeel that gives you a full-featured messaging system in a few commands. For more details, check out Add Chatify to existing laravel app. For more details, check out Unlocking Your Internal Drives After Windows 11 Installation. For more details, check out How to Install macOS in VirtualBox on Windows (2026 Guide).

I ran into my fair share of integration headaches getting it to play nicely with an existing app's layout and authentication system. Here's the exact process I use, including all the file edits needed.

What You'll Get

Chatify provides out of the box: - Private 1-to-1 messaging between users - Real-time message delivery via Pusher - Message favorites and saved messages - Typing indicators - Dark mode support - File and image attachments - emoji picker

Prerequisites

  • An existing Laravel app (any version from Laravel 9 through 11)
  • A Pusher account (free tier — sign up at pusher.com)
  • Composer installed
  • User authentication already set up (Laravel Breeze, Jetstream, or custom)

Step 1: Set Up Pusher

Chatify uses Pusher for real-time message delivery. Head to your Pusher dashboard and create a new app. Select Laravel as your backend (or jQuery + Laravel — Chatify bundles its own JS). Note down your app credentials:

  • App ID
  • Key
  • Secret
  • Cluster
Select app stack

In your app settings, make sure Client Events are enabled. Chatify uses client events for typing indicators.

Enable client events

Step 2: Configure Pusher in Your Laravel App

chatify laravel app

Add these to your .env file:

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=us2
CHATIFY_ROUTES_PREFIX=chat

Make sure config/broadcasting.php is set up for Pusher. Laravel 11's default config handles this, but verify the connections.pusher section reads from environment variables:

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'useTLS' => true,
    ],
],

Step 3: Install Chatify

Install the package via Composer:

composer require munafio/chatify

Publish the assets, config, and migrations:

php artisan chatify:install

This command: - Publishes the Chatify config to config/chatify.php - Publishes views to resources/views/vendor/Chatify/ - Publishes assets to public/js/chatify/ and public/css/chatify/ - Creates migration files for the messages table - Creates the storage symlink for attachments

Run the migrations:

php artisan migrate

Step 4: Integrate Chatify into Your App Layout

This is where most people get stuck. Chatify ships with its own HTML structure, but you need to wrap it inside your existing app layout.

Edit the Main Chatify View

Open resources/views/vendor/Chatify/pages/app.blade.php and wrap the entire content with your app's layout tags:

<x-app-layout>

    <div class="space-y-8">
        <div class="flex lg:space-x-5 chat-height overflow-hidden relative rtl:space-x-reverse">
            @include('Chatify::layouts.headLinks')
            <div class="messenger">
                {{-- Users/Groups list side --}}
                <div class="messenger-listView {{ Auth::user()->id ? 'conversation-active' : '' }}">
                    <!-- ... keep the full existing content ... -->
                </div>

                {{-- Messaging side --}}
                <div class="messenger-messagingView">
                    <!-- ... keep the full existing content ... -->
                </div>

                {{-- Info side --}}
                <div class="messenger-infoView app-scroll">
                    <!-- ... keep the full existing content ... -->
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

@include('Chatify::layouts.modals')
@include('Chatify::layouts.footerLinks')

The key change is adding <x-app-layout>...</x-app-layout> around the Chatify content. Remove Chatify's default <html>, <head>, and <body> tags since your layout provides those.

Open resources/views/vendor/Chatify/layouts/headLinks.blade.php and simplify it to only include what's needed — your app layout already provides the HTML boilerplate:

<title>{{ config('chatify.name') }}</title>

{{-- Meta tags --}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="id" content="{{ Auth::user()->id }}">
<meta name="messenger-color" content="{{ Auth::user()->messenger_color }}">
<meta name="messenger-theme" content="{{ Auth::user()->dark_mode }}">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="url" content="{{ url('').'/'.config('chatify.routes.prefix') }}" data-user="{{ Auth::user()->id }}">

{{-- Scripts --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('js/chatify/font.awesome.min.js') }}"></script>
<script src="{{ asset('js/chatify/autosize.js') }}"></script>
<script src='https://unpkg.com/[email protected]/nprogress.js'></script>

{{-- Styles --}}
<link rel='stylesheet' href='https://unpkg.com/[email protected]/nprogress.css'/>
<link href="{{ asset('css/chatify/style.css') }}" rel="stylesheet" />
<link href="{{ asset('css/chatify/'. (Auth::user()->dark_mode > 0 ? 'dark' : 'light').'.mode.css') }}" rel="stylesheet" />

<style>
    :root {
        --primary-color: {{ Auth::user()->messenger_color }};
    }
</style>

Update the Modal

In resources/views/vendor/Chatify/layouts/modals.blade.php, find the "Update" button and add a dynamic background color:

<label class="app-btn a-btn-primary update"
    style="background-color:{{ Auth::user()->messenger_color }}">

Step 5: Mount Chatify in Your App

To display Chatify on a page, add this to any blade view:

@include('vendor.Chatify.pages.app')

Or create a dedicated route that loads Chatify. Add to routes/web.php:

Route::middleware(['auth'])->group(function () {
    Route::get('/chat', function () {
        return view('chat');
    })->name('chat');
});

And the view at resources/views/chat.blade.php:

@extends('layouts.app')

@section('title', 'Messages')

@section('content')
    @include('vendor.Chatify.pages.app')
@endsection

Step 6: Configure the Route Prefix

Open config/chatify.php and set the prefix to match your routing:

'prefix' => env('CHATIFY_ROUTES_PREFIX', 'chat'),

This tells Chatify to use /chat as the base URL for its API routes (send message, fetch conversations, etc.).

Step 7: Test It

Load your app at /chat. You should see Chatify's messaging interface embedded in your app layout.

If messages aren't sending in real-time, check:

  1. Pusher credentials — double-check your .env values
  2. Queue driver — if QUEUE_CONNECTION=sync, broadcasts happen inline. For production, use database or redis
  3. Cache — clear it:
php artisan cache:clear
php artisan view:clear
php artisan optimize:clear

Troubleshooting Common Integration Issues

Chatify Shows Blank White Page

Your layout styles are likely conflicting. Open browser DevTools and check if the .messenger container has display: none or zero height. This happens when Tailwind's prose class or similar resets overlap with Chatify's CSS.

Fix: Scope your app's CSS or increase specificity on Chatify's containers.

Pusher Not Connecting in Real-Time

Check the browser console for CORS errors. If you're using php artisan serve (localhost), Pusher should connect fine. For production behind a proxy, ensure WebSocket traffic isn't blocked.

Also verify you enabled Client Events in the Pusher dashboard — Chatify needs them for typing indicators.

Chatify Routes Returning 404

The chatify:install command registers routes automatically. If you see 404 errors, check that Chatify's service provider is registered in bootstrap/providers.php (Laravel 11) or config/app.php (Laravel 10 and below):

// Laravel 11: bootstrap/providers.php
return [
    App\Providers\AppServiceProvider::class,
    Chatify\ChatifyServiceProvider::class, // Add this
];

// Laravel 10 and below: config/app.php
'providers' => [
    // ...
    Chatify\ChatifyServiceProvider::class,
],

Messages Persist but Don't Broadcast

Run php artisan queue:listen in another terminal while testing. Without a running queue worker, broadcast events sit in the queue and never reach Pusher.

Avatar Images Not Showing

Run the storage link command:

php artisan storage:link

Chatify stores avatars in the storage/app/public directory, and the symlink makes them accessible from the web.

Laravel 11 Specific Notes

Chatify was originally built for older Laravel versions, but it works fine with Laravel 11 with a few adjustments:

  • Service Provider Registration: Laravel 11 uses bootstrap/providers.php instead of config/app.php. Add Chatify\ChatifyServiceProvider::class there.
  • Middleware: Laravel 11's middleware is registered in bootstrap/app.php. Chatify bundles its own middleware — no changes needed there.
  • Vite vs Mix: Chatify expects Mix-compiled assets. For Laravel 11 apps using Vite, copy Chatify's published assets to public/ as-is — the package already places them there via chatify:install.

Wrapping Up

Adding Chatify to an existing Laravel app takes about 30 minutes once you know which files to edit. The trickiest part is integrating the views with your existing layout, but the pattern is consistent: wrap the app view in your layout, trim the headLinks, and configure the route prefix.

I've used this setup on half a dozen projects now and it's solid. The package handles everything from message threading to file attachments, so you don't have to reinvent the messaging wheel. Give it a try.

Laravel Chatify real-time messaging dashboard with Pusher integration
Laravel
Techie Mike
Techie Mike
Techie Mike
You might also like
Laravel • 7 min read
•

Building a Real-Time Chat App with Laravel Livewire and Pusher

# Building a Real-Time Chat App with Laravel Livewire and Pusher Real-time features used to mean wrestling with WebSocket servers, running a separate Node process, or paying for hosted infrastructure that was overkill for small apps. But Laravel Livewire combined with Pusher changes the game — you…
Techie Mike
Techie Mike •
Laravel • 5 min read
•

Laravel Development on Windows: Laragon Setup, Composer & Git Bash

# Laravel Development on Windows: Laragon Setup, Composer & Git Bash If you've tried setting up a Laravel development environment on Windows, you know the pain. WampServer? XAMPP? Manually configuring Apache, PHP, and MySQL? It works, but it's fiddly and every project ends up needing slightly diffe…
Techie Mike
Techie Mike •
Laravel • 9 min read
•

Setting Up Laravel with AdminLTE and Multi-Auth (Laravel 11 Guide)

# Setting Up Laravel with AdminLTE and Multi-Auth (Laravel 11 Guide) If you're building an admin panel in Laravel, you've probably heard about AdminLTE — it's one of the most popular admin dashboard templates out there. Combine it with multi-authentication (separate dashboards for admins and regula…
Techie Mike
Techie Mike •