💬 Laravel Messaging

Add Chat to Your App with Chatify

A complete, ready-to-use Laravel chat package with beautiful UI, real-time messaging via Pusher, attachments, message seen status, and more — all fully customizable.

Laravel 9/10/11 munafio/chatify Pusher Real-time Tailwind CSS

What is Chatify?

Chatify is a Laravel package by Munaf A. Mahdi that adds a fully functional, customizable chat system to your Laravel application. It includes a beautiful, modern UI built with Tailwind CSS, real-time messaging powered by Pusher, file attachments, message seen indicators, and a complete REST API — all out of the box.

Laravel App

Your Project

Chatify

Package

Pusher

Real-time

Full Chat

Instant Messaging

Key Features at a Glance

Feature	Chatify
One-to-one messaging	✓ Built-in
Real-time (Pusher)	✓ Optional
Message seen status	✓
File attachments	✓ Images, PDFs, etc.
Responsive UI	✓ Tailwind CSS
REST API	✓ For mobile apps
Notifications	✓ Email & push

Installation & Setup

Chatify is installed via Composer. After installation, you run a setup command that publishes assets, migrations, and configuration files automatically.

Step 1: Require the package

bash

composer require munafio/chatify

Step 2: Run the Chatify installer

This single command publishes everything: migrations, config, assets, and user model updates.

bash

php artisan chatify:install

ℹ️

The installer automatically adds the Chatify\Traits\ChatifyMessenger trait to your User model. If you have a custom model, you can add it manually.

Step 3: Run migrations

bash

php artisan migrate

Step 4: Link storage (for attachments)

bash

php artisan storage:link

✅

Visit http://your-app.test/chatify to see your fully functional chat interface!

Configuration Deep Dive

Chatify publishes a configuration file at config/chatify.php. Here are the most important settings you'll want to customize.

phpconfig/chatify.php

return [
    // User model settings
    'user' => [
        'model' => App\Models\User::class,
        'table' => 'users',
        'avatar_column' => 'avatar',  // column for user photo
    ],

    // Route prefix & middleware
    'routes' => [
        'prefix' => 'chatify',
        'middleware' => ['web', 'auth'],
        'namespace' => 'Chatify\Http\Controllers',
    ],

    // Pusher settings for real-time
    '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,
        ],
    ],

    // Attachments
    'attachments' => [
        'folder' => 'attachments',
        'allowed_images' => ['png','jpg','jpeg','gif'],
        'allowed_files' => ['zip','rar','txt','pdf'],
        'max_upload_size' => 10, // MB
    ],
];

Routes & Chat Pages

Chatify automatically registers all necessary routes under the prefix you define. The main chat page is the default landing page.

Core Routes

phpAuto-registered routes

// GET  /chatify              → Main chat page
// GET  /chatify/{id}         → Chat with specific user
// POST /chatify/api/search   → Search users
// POST /chatify/api/send     → Send a message
// POST /chatify/api/fetch    → Fetch messages
// POST /chatify/api/seen     → Mark messages as seen

🖥️ Chat Interface Preview

/chatify

👤 Sarah Johnson Online

Hey! Are you coming to the meetup?Yes! I'll be there by 6. 🎉Awesome, see you then! 👋

Customizing the UI

Chatify's views are published to your resources/views/vendor/Chatify directory. You can modify Blade templates, CSS, and JavaScript to match your brand.

bash

# Publish all Chatify assets & views
php artisan vendor:publish --tag=chatify-views
php artisan vendor:publish --tag=chatify-assets

💡

The main layout file is layouts/favourite.blade.php. Edit the color variables in headLinks.blade.php to change the theme instantly.

Real-time with Pusher

To enable real-time messaging (messages appear without page refresh), configure Pusher in your .env file. Chatify uses Laravel's broadcasting system.

Step 1: Set up Pusher credentials

bash.env

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-key
PUSHER_APP_SECRET=your-pusher-secret
PUSHER_APP_CLUSTER=ap2

Step 2: Enable real-time in Chatify config

phpconfig/chatify.php

'pusher' => [
    'enable' => true,  // Turn on real-time
    // ... other pusher settings
],

⚠️

You must have a Pusher account (free tier works for development). Get your credentials from pusher.com.

Chatify REST API

Chatify exposes API endpoints that you can use to build a mobile app or a custom frontend. All endpoints require authentication via Laravel Sanctum or a custom guard.

javascriptAPI usage example (axios)

// Search for users to chat with
axios.post('/chatify/api/search', { search: 'john' });

// Send a message
axios.post('/chatify/api/send', {
    id: 5,           // receiver user ID
    message: 'Hello!',
    temporaryMsgId: 'temp_123'
});

// Fetch messages with a specific user
axios.post('/chatify/api/fetch', { id: 5 });

File Attachments & Media

Chatify supports image uploads, document sharing, and file previews. Allowed file types and max sizes are configured in config/chatify.php.

phpAttachment configuration

'attachments' => [
    'folder' => 'attachments',
    'allowed_images' => ['png', 'jpg', 'jpeg', 'gif', 'webp'],
    'allowed_files' => ['zip', 'rar', 'txt', 'pdf', 'doc', 'docx'],
    'max_upload_size' => 20, // 20 MB
],

🖼️

Images are displayed inline in the chat. Other file types appear as downloadable file cards with the file name and size.

Message Notifications

Chatify can send notifications to users when they receive a new message. This works with Laravel's notification system and can be extended to email, Slack, or push notifications.

phpapp/Notifications/NewMessageNotification.php

use Illuminate\Notifications\Notification;

class NewMessageNotification extends Notification
{
    public function via($notifiable): array
    {
        return ['mail', 'database'];
    }

    public function toMail($notifiable)
    {
        return (new MailMessage)
            ->line('You have a new message from ' . $this->sender->name)
            ->action('View Message', url('/chatify'));
    }
}

Best Practices & Tips

⚡

Use Pusher from day one

Real-time messaging is expected in modern apps. The free tier handles up to 200k messages/day.

🔒

Sanitize file uploads

Always validate file types on the server side. Never trust client-side validation alone.

📱

Test the API early

If you plan a mobile app, test Chatify's REST API endpoints early in development.

🎨

Brand your chat

Customize the color variables in the published CSS to match your application's branding.

🗄️

Optimize queries

Chatify loads conversation lists frequently. Add database indexes to ch_messages table if scaling.

📧

Queue notifications

Send message notifications via queues to avoid slowing down the chat experience.

📚 Official Resources

Chatify GitHub Repository — Documentation, issues, and community discussions.

Pusher — Real-time messaging infrastructure.