monkeype / filament-social-button-widget

1.0.0 2026-10-19 18:06 UTC

Requires

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

MIT

• Alex Quevedo

Published on Packagist.org on 2026-10-19 23:13 UTC

README

Beautiful, customizable WhatsApp and Facebook Messenger floating button widgets for Filament Admin Panel v3 and Laravel Blade views.

Features

• 🎨 Modern, animated floating buttons with official WhatsApp & Facebook Messenger branding
• ⚙️ Fully configurable through independent Filament Resources (WhatsApp Settings and Messenger Settings)
• 📐 Automatic vertical stacking when both widgets are active in the same position (bottom-right or bottom-left)
• 📱 Responsive design (mobile-friendly)
• 🎯 Customizable button position (bottom-right or bottom-left)
• 💬 Pre-filled message support (wa.me & m.me)
• 🌓 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-social-button-widget

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

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

1. Run migrations and publish assets:

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

1. Register the plugin in your Filament Panel Provider:

use Monkeype\Filament\SocialButtonWidget\SocialButtonWidgetPlugin;

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

Usage

1. Configure WhatsApp Settings

• Navigate to your Filament admin panel
• Go to Settings → WhatsApp Settings
• Click Create to add a new configuration:
  • Phone Number: Enter the WhatsApp number with country code (e.g., [phone])
  • Default Message (Optional): Pre-filled message when the chat opens
  • Button Text: Text to display on the button (default: "Chat with us")
  • Show Button Text: Toggle text visibility next to the icon
  • Button Position: Choose between "Bottom Right" or "Bottom Left"
  • Active: Toggle to show/hide the widget

2. Configure Facebook Messenger Settings

• Navigate to your Filament admin panel
• Go to Settings → Messenger Settings
• Click Create to add a new configuration:
  • Page Username or ID: Enter your Facebook Page username or ID (e.g., my.page)
  • Default Message (Optional): Pre-filled message when the chat opens (?text=...)
  • Button Text: Text to display on the button (default: "Chat with us")
  • Show Button Text: Toggle text visibility next to the icon
  • Button Position: Choose between "Bottom Right" or "Bottom Left"
  • Active: Toggle to show/hide the widget

3. Rendering in Frontend Blade Views

You can include either or both buttons in any Blade layout:

@include('filament-social-button-widget::whatsapp-button')
@include('filament-social-button-widget::messenger-button')

If both widgets are active and configured on the same side (e.g., both on bottom-right), the Messenger button will automatically stack above the WhatsApp button so they never overlap.

Configuration Options

WhatsApp (whatsapp_settings)

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
show_button_text	Boolean	Yes	true	Show/hide text next to the icon
button_position	Select	Yes	"bottom-right"	Position of the floating button
is_active	Boolean	Yes	true	Show/hide the widget

Facebook Messenger (messenger_settings)

Field	Type	Required	Default	Description
page_username	String	Yes	-	Facebook Page username or ID (m.me/{username})
default_message	Text	No	-	Pre-filled message for the chat
button_text	String	Yes	"Chat with us"	Text displayed on the button
show_button_text	Boolean	Yes	true	Show/hide text next to the icon
button_position	Select	Yes	"bottom-right"	Position of the floating button
is_active	Boolean	Yes	true	Show/hide the widget

Customization

Styling

The widgets load their styles from an external minified CSS file for optimal performance and maintainability.

Publishing Assets

To customize the widgets' appearance, publish the package assets:

php artisan vendor:publish --tag=filament-social-button-widget-assets

This will copy the CSS file to:

public/vendor/filament-social-button-widget/css/social-button-widget.min.css

Available CSS Classes

• WhatsApp:
  • .whatsapp-float-button - Main container
  • .whatsapp-button - Button element
  • .whatsapp-icon - WhatsApp icon
  • .whatsapp-text - Button text
  • .whatsapp-bottom-right / .whatsapp-bottom-left - Position modifiers
• Facebook Messenger:
  • .messenger-float-button - Main container
  • .messenger-stacked - Applied automatically when stacked above WhatsApp on the same side
  • .messenger-button - Button element
  • .messenger-icon - Messenger icon
  • .messenger-text - Button text
  • .messenger-bottom-right / .messenger-bottom-left - Position modifiers

Requirements

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

License

MIT License

Author

Alex Quevedo - [e-mail]