WhatsApp Message Preview

• Preview
• Features
• Compatibility
• Installation
• Assets
  • FilamentPHP v3
  • FilamentPHP v4 & v5
• Usage
• Available Methods
• Troubleshooting
  • Styles not applied?
• Contributing
• Credits
• License

A FilamentPHP field plugin that renders a real-time WhatsApp-style message preview with support for formatting, lists, quotes and message direction.

#Preview

#Features

• 📱 Real-time WhatsApp-style preview
• ↔️ Incoming & outgoing message direction
• ✏️ Supports formatting (bold, italic, lists, quotes)
• 🧩 Seamless integration with Filament Forms
• 🎨 Tailwind-powered styling

#Compatibility

PHP compatibility is determined by the supported Laravel version.

#Installation

You can install the package via composer:

composer require rarq/filament-whatsapp-message-preview

#Assets

This package includes Blade views that must be scanned by Tailwind CSS to properly generate the component styles.

The configuration differs depending on your Filament version.

#FilamentPHP v3

If you are using Filament v3, you must create a custom theme and register the package views inside your tailwind.config.js.

📖 Click here to follow the official guide for creating a custom theme.

Then, add the plugin views to the content array of your tailwind.config.js:

content: [
    // ...
    './vendor/rarq/filament-whatsapp-message-preview/resources/views/**/*.blade.php',
]

After that, rebuild your assets:

npm run build

#FilamentPHP v4 & v5

If you are using Filament v4 or v5, you must also create a custom theme.

📖 Official documentation:

• Filament v4: Click here
• Filament v5: Click here

Instead of modifying your tailwind.config.js, register the package views using the @source directive inside your custom theme CSS file (usually located at resources/css/filament/admin/theme.css):

@source '../../../../vendor/rarq/filament-whatsapp-message-preview/resources/views';

Then rebuild your assets:

npm run build

⚠️ Important:
If you do not configure these assets correctly, Tailwind may purge the component styles and the WhatsApp preview UI may not render properly.

#Usage

use Rarq\FilamentWhatsappMessagePreview\Enums\MessageDirection;
use Rarq\FilamentWhatsappMessagePreview\Forms\Components\WhatsappMessagePreview;

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                WhatsappMessagePreview::make('message_body')
                    ->label('Message')
                    ->required()
                    ->rows(5)
                    ->autosize()
                    ->hideMessageDirectionTabs(false)
                    ->messageDirection(MessageDirection::OUTGOING)
                    ->incomingDirectionLabel('Incoming')
                    ->outgoingDirectionLabel('Outgoing')
                    ->previewLabel('WhatsApp Preview')
                    ->hiddenPreview(false),
            ]);
    }

#Available Methods

#Troubleshooting

#Styles not applied?

Make sure:

• You created a custom Filament theme
• You registered the package views in Tailwind
• You rebuilt your assets (npm run build)

#Contributing

Contributions are welcome!

Please open an issue before submitting a pull request.

#Credits

• Rodrigo A. Ríos Q.

#License

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