PHPackages rarq/filament-whatsapp-message-preview - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Queues & Workers](/categories/queues) 4. / 5. rarq/filament-whatsapp-message-preview ActiveLibrary[Queues & Workers](/categories/queues) rarq/filament-whatsapp-message-preview ====================================== A FilamentPHP field plugin that renders a real-time WhatsApp-style message preview with support for formatting, lists, quotes and message direction. 1.0.0(4mo ago)51652[1 issues](https://github.com/rodrigoarq14/filament-whatsapp-message-preview/issues)MITPHPPHP ^8.1 Since Mar 3Pushed 4mo agoCompare [ Source](https://github.com/rodrigoarq14/filament-whatsapp-message-preview)[ Packagist](https://packagist.org/packages/rarq/filament-whatsapp-message-preview)[ RSS](/packages/rarq-filament-whatsapp-message-preview/feed)WikiDiscussions main Synced 3d ago READMEChangelogDependencies (3)Versions (2)Used By (0) WhatsApp Message Preview ======================== [](#whatsapp-message-preview) [![Header](https://raw.githubusercontent.com/rodrigoarq14/filament-whatsapp-message-preview/main/.github/images/cover.webp)](https://raw.githubusercontent.com/rodrigoarq14/filament-whatsapp-message-preview/main/.github/images/cover.webp) [![Latest Version](https://camo.githubusercontent.com/d420758078d7b6c7b956b05e9d583ed0748d9e4baee9f96fccf2a7bd1a87ab88/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f726172712f66696c616d656e742d77686174736170702d6d6573736167652d707265766965773f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/rarq/filament-whatsapp-message-preview)[![Downloads](https://camo.githubusercontent.com/c973221a797615a783432d2d24163aeffbe670e496f35947af51f59b7db74958/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f726172712f66696c616d656e742d77686174736170702d6d6573736167652d707265766965773f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/rarq/filament-whatsapp-message-preview)[![PHP Version](https://camo.githubusercontent.com/4c9c5fabbd623b4dab625502e71a2fd4366924feb3a8a629d46e6081e240b85f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f726172712f66696c616d656e742d77686174736170702d6d6573736167652d707265766965773f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/rarq/filament-whatsapp-message-preview)[![Laravel](https://camo.githubusercontent.com/c891c8a45c245b763566e3f799dd71ed8854255e2973c646ffe336e5dcf61117/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d3130253230253743253230313125323025374325323031322d4646324432303f7374796c653d666f722d7468652d6261646765266c6f676f3d6c61726176656c)](https://github.com/laravel/laravel)[![Filament](https://camo.githubusercontent.com/c0eae29a85b463e6bc77560a1cb93beba1119efffadc7449a9748896520798cc/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f46696c616d656e742d3325323025374325323034253230253743253230352d4635394530423f7374796c653d666f722d7468652d6261646765)](https://github.com/filamentphp/filament)[![License](https://camo.githubusercontent.com/2ee0c93d7cfd12829ad70901169d1c33f77a3b4341596b1fef8ecc6d4598b4fb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f726172712f66696c616d656e742d77686174736170702d6d6573736167652d707265766965773f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/rarq/filament-whatsapp-message-preview) A FilamentPHP field plugin that renders a real-time WhatsApp-style message preview with support for formatting, lists, quotes and message direction. Preview ------- [](#preview) [![Screenshot 1](https://raw.githubusercontent.com/rodrigoarq14/filament-whatsapp-message-preview/main/.github/images/screenshot-1.webp)](https://raw.githubusercontent.com/rodrigoarq14/filament-whatsapp-message-preview/main/.github/images/screenshot-1.webp) [![Screenshot 2](https://raw.githubusercontent.com/rodrigoarq14/filament-whatsapp-message-preview/main/.github/images/screenshot-2.webp)](https://raw.githubusercontent.com/rodrigoarq14/filament-whatsapp-message-preview/main/.github/images/screenshot-2.webp) Features -------- [](#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 ------------- [](#compatibility) Filament VersionLaravel VersionPHP VersionTailwind Versionv3.xLaravel 108.1 – 8.3Tailwind CSS v3v4.xLaravel 118.2 – 8.4Tailwind CSS v4v5.xLaravel 11–128.2 – 8.5Tailwind CSS v4> PHP compatibility is determined by the supported Laravel version. Installation ------------ [](#installation) You can install the package via composer: ``` composer require rarq/filament-whatsapp-message-preview ``` Assets ------ [](#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 [](#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](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme) 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 [](#filamentphp-v4--v5) If you are using **Filament v4 or v5**, you must also create a custom theme. 📖 Official documentation: - Filament v4: [Click here](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme) - Filament v5: [Click here](https://filamentphp.com/docs/5.x/styling/overview#creating-a-custom-theme) 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 ----- [](#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 ----------------- [](#available-methods) MethodDescription`hideMessageDirectionTabs()`Hide the direction selector tabs`messageDirection()`Set default message direction`incomingDirectionLabel()`Customize incoming label`outgoingDirectionLabel()`Customize outgoing label`previewLabel()`Customize preview title`hiddenPreview()`Hide the preview panelTroubleshooting --------------- [](#troubleshooting) ### Styles not applied? [](#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 ------------ [](#contributing) Contributions are welcome! Please open an issue before submitting a pull request. Credits ------- [](#credits) - [Rodrigo A. Ríos Q.](https://github.com/rodrigoarq14) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 38 — LowBetter than 83% of packages Maintenance73 Regular maintenance activity Popularity18 Limited adoption so far Community7 Small or concentrated contributor base Maturity43 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 123d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/130109015?v=4)[Rodrigo Alfonso Ríos Quevedo](/maintainers/rodrigoarq14)[@rodrigoarq14](https://github.com/rodrigoarq14) --- Top Contributors [![rodrigoarq14](https://avatars.githubusercontent.com/u/130109015?v=4)](https://github.com/rodrigoarq14 "rodrigoarq14 (1 commits)") --- Tags messagelaravelpreviewwhatsappfilamentfilament-pluginfilamentphpfilament-packagefilament-forms ### Embed Badge ![Health badge](/badges/rarq-filament-whatsapp-message-preview/health.svg) ``` [![Health](https://phpackages.com/badges/rarq-filament-whatsapp-message-preview/health.svg)](https://phpackages.com/packages/rarq-filament-whatsapp-message-preview) ``` ### Alternatives [codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 329530.5k29](/packages/codewithdennis-filament-select-tree)[croustibat/filament-jobs-monitor Background Jobs monitoring like Horizon for all drivers for FilamentPHP 274327.2k9](/packages/croustibat-filament-jobs-monitor)[spatie/laravel-pdf Create PDFs in Laravel apps 1.0k4.8M47](/packages/spatie-laravel-pdf)[harris21/laravel-fuse Circuit breaker for Laravel queue jobs. Protect your workers from cascading failures. 44855.7k](/packages/harris21-laravel-fuse)[rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3914.6k](/packages/rawilk-profile-filament-plugin)[danihidayatx/image-optimizer Optimize your Filament images before they reach your database. Forked from joshembling/image-optimizer for Filament v4 & v5 support. 3218.1k](/packages/danihidayatx-image-optimizer) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)