monkeype/filament-whatsapp-widget

Filament Whatsapp Widget

1.0.0 2025-11-24 15:46 UTC

Requires

• filament/filament: ^3.0
• spatie/laravel-package-tools: ^1.16

MIT

• Alex Quevedo

README

A beautiful, customizable WhatsApp floating button widget for Filament Admin Panel v3.

Features

• 🎨 Modern, animated floating button with WhatsApp branding
• ⚙️ Fully configurable through Filament Resource
• 📱 Responsive design (mobile-friendly)
• 🎯 Customizable button position (bottom-right or bottom-left)
• 💬 Pre-filled message support
• 🌓 Dark mode support
• ✨ Smooth animations and hover effects
• 🚀 Optimized with external minified CSS for better performance

Installation

1. Install the package via composer (if published):

composer require monkeype/filament-whatsapp-widget

Or add it to your composer.json if it's a local package:

{
    "repositories": [
        {
            "type": "path",
            "url": "./packages/filament-whatsapp-widget"
        }
    ]
}

1. Run migrations and publish assets:

php artisan vendor:publish --tag=filament-whatsapp-widget-migrations
php artisan migrate
php artisan vendor:publish --tag=filament-whatsapp-widget-assets
// Optional: Publish and customize the configuration file:
php artisan vendor:publish --tag=filament-whatsapp-widget-config

1. Register the plugin in your Filament Panel Provider:

use Monkeype\Filament\WhatsappWidget\WhatsappWidgetPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        // ... other configuration
        ->plugins([
            WhatsappWidgetPlugin::make(),
        ]);
}

Usage

1. Configure WhatsApp Settings

   • Navigate to your Filament admin panel
   • Go to "Settings" → "WhatsApp Settings"
   • Click "Create" to add a new configuration

2. Required Settings

   • Phone Number: Enter the WhatsApp number with country code (e.g., [phone])
   • Button Text: Text to display on the button (default: "Chat with us")
   • Button Position: Choose between "Bottom Right" or "Bottom Left"
   • Active: Toggle to show/hide the widget

3. Optional Settings

   • Default Message: Pre-filled message when the chat opens

Configuration Options

Field	Type	Required	Default	Description
Phone Number	String	Yes	-	WhatsApp number with country code
Default Message	Text	No	-	Pre-filled message for the chat
Button Text	String	Yes	"Chat with us"	Text displayed on the button
Button Position	Select	Yes	"bottom-right"	Position of the floating button
Active	Boolean	Yes	true	Show/hide the widget

How It Works

The widget automatically:

• Displays a floating button on all Filament admin pages
• Generates the correct WhatsApp URL with phone number and optional message
• Adapts to mobile screens (shows only icon on small devices)
• Applies smooth animations and hover effects

Customization

Styling

The widget loads its styles from an external minified CSS file for optimal performance and maintainability.

Publishing Assets

To customize the widget's appearance, first publish the package assets:

php artisan vendor:publish --tag=filament-whatsapp-widget-assets

This will copy the CSS file to:

public/vendor/filament-whatsapp-widget/dist/css/whatsapp-widget.min.css

Customizing Styles

You have two options to customize the styles:

1. Direct Modification (Quick but not recommended for production):

   • Edit the published file directly in public/vendor/filament-whatsapp-widget/dist/css/whatsapp-widget.min.css
   • Note: Changes will be overwritten if you republish assets

2. Source Modification (Recommended):

   • Edit the source CSS file in the package: packages/filament-whatsapp-widget/resources/css/whatsapp-widget.css
   • Minify the CSS and update resources/dist/css/whatsapp-widget.min.css
   • Republish the assets

Available CSS Classes

• .whatsapp-float-button - Main container
• .whatsapp-button - Button element
• .whatsapp-icon - WhatsApp icon
• .whatsapp-text - Button text
• .whatsapp-bottom-right - Right position modifier
• .whatsapp-bottom-left - Left position modifier

Example

After configuration, users will see a beautiful green WhatsApp button floating on the screen. When clicked, it opens WhatsApp with your configured phone number and optional pre-filled message.

Requirements

• PHP 8.1 or higher
• Laravel 10.x or higher
• Filament 3.x

License

MIT License

Author

Alex Quevedo - [e-mail]