README

A powerful conversational flow builder plugin for Filament v3. Create interactive chatbot experiences with conditional logic, multi-language support, and comprehensive analytics.

Note: This is the stable branch for Filament v3. For Filament v4 support, use the v4 branch or install version ^2.0.

Features

🎨 Visual Flow Builder - Build chat flows with an intuitive form-based interface
💬 Floating Chat Widget - Beautiful, responsive chat widget that works on all pages
🌍 Multi-Language Support - Built-in support for multiple languages (English & Indonesian included)
📊 Analytics Dashboard - Track conversation metrics, completion rates, and drop-off points
📧 Email Transcripts - Automatically send conversation transcripts via email
🎯 Conditional Logic - Create complex conversation flows with if-else branching
🔔 Sound Notifications - Optional sound notifications for new messages
🌙 Dark Mode Support - Full dark mode compatibility
⚡ Rate Limiting - Built-in API rate limiting for security
🧪 Comprehensive Testing - Full test coverage with Pest v4

Requirements

PHP 8.3 or higher
Laravel 12.x
Filament 3.x
Livewire 3.x

Installation

Install the package via composer:

composer require syofyanzuhad/filament-chatflow

Run the installation command:

php artisan filament-chatflow:install

This will publish the config file, migrations, and ask to run migrations.

Alternatively, you can publish and run the migrations manually:

php artisan vendor:publish --tag="filament-chatflow-migrations"
php artisan migrate

use Syofyanzuhad\FilamentChatflow\FilamentChatflowPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentChatflowPlugin::make(),
        ]);
}

Configuration

Publish the config file (if not already published):

php artisan vendor:publish --tag="filament-chatflow-config"

The config file contains options for:

Widget appearance and behavior
Conversation expiration settings
Email transcript configuration
Analytics settings
Rate limiting
Security options
And more...

Usage

Creating a Chatflow

Navigate to Chatflow in your Filament panel
Click New Chatflow
Fill in basic information:
- Name
- Description
- Welcome message (multi-language supported)
- Widget position (bottom-right, bottom-left, top-right, top-left)
- Theme color
- Email and notification settings
Click Save and you'll be redirected to the Flow Builder

Building the Conversation Flow

The Flow Builder allows you to create conversation steps:

Message Steps - Display information to users
Question Steps - Present options for users to choose
End Steps - Conclude the conversation

Each step supports:

Multi-language content (English & Indonesian by default)
Nested child steps for complex flows
Quick reply options with branching logic

Example flow structure:

Welcome Message
└── Question: "How can we help you?"
    ├── Option 1: "Product Inquiry"
    │   └── Message: "Visit our catalog..."
    ├── Option 2: "Technical Support"
    │   └── Question: "What issue?"
    │       ├── "Login Issue" → Solution steps
    │       └── "Performance" → Solution steps
    └── Option 3: "Other"
        └── Message: "Contact us..."

Adding the Chat Widget to Your Frontend

Add the chat widget to your layout blade file:

<body>
    <!-- Your content -->

    @livewire('chatflow-widget', ['chatflow' => App\Models\Chatflow::find(1)])
</body>

Or use the chatflow ID directly:

@livewire('chatflow-widget', ['chatflow' => $chatflow])

Viewing Conversations

Navigate to Conversations in your Filament panel to:

View all conversation history
Filter by chatflow, status, date range, or language
See detailed message timelines
Track user information and metadata

Analytics Dashboard

The Analytics widget on your dashboard shows:

Total conversations
Active conversations
Completed today
Average completion rate

Access detailed analytics in the Chatflow Resource to see:

Completion rates over time
Drop-off points (where users abandon)
Popular conversation paths
Hourly distribution

API Endpoints

The package provides API endpoints for programmatic access:

// Get chatflow configuration
GET /api/chatflow/{chatflow}/config

// Start a conversation
POST /api/chatflow/{chatflow}/start

// Send a message
POST /api/chatflow/message

// End a conversation
POST /api/chatflow/end

// Get conversation history
GET /api/chatflow/history

Seeding Sample Data

Run the seeder to create a sample customer support chatflow:

php artisan db:seed --class="Syofyanzuhad\\FilamentChatflow\\Database\\Seeders\\ChatflowSeeder"

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

syofyanzuhad / filament-chatflow

Maintainers

Details