Filament Whatsapp Widget

https://github.com/jeffersongoncalves/filament-whatsapp-widget
Admin
Filament Whatsapp Widget is a Filament plugin for Laravel that provides a customizable floating...
Tokens:4,934
Snippets:55
Trust Score:9.8
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install filament-whatsapp-widget with Composer

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Install the package via Composer. Requires PHP 8.2+, Laravel 11.0+, and Filament 5.0.

```bash
composer require jeffersongoncalves/filament-whatsapp-widget
```

--------------------------------

### Publish and Run Migrations

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/resources/boost/skills/filament-whatsapp-widget-development/SKILL.md

Publish the package migrations and run them to create the necessary database tables.

```bash
php artisan vendor:publish --tag=whatsapp-widget-migrations
php artisan migrate
```

--------------------------------

### Publish configuration files

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Publish the configuration files for the package and its Filament wrapper.

```bash
php artisan vendor:publish --tag=whatsapp-widget-config
php artisan vendor:publish --tag=filament-whatsapp-widget-config
```

--------------------------------

### Configure config/whatsapp-widget.php

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Configuration file for the base widget. Customize audio, disk, URL, name, key, and position.

```php
return [
    // Enable or disable audio notification
    'audio' => true,

    // Play audio notification once per day or on every page load
    'play_audio_daily' => true,

    // Filesystem disk for storing agent images
    'disk' => env('FILESYSTEM_DISK', 'local'),

    // Application URL (used for redirection)
    'url' => env('APP_URL', 'http://localhost'),

    // Application name (displayed in the widget)
    'name' => env('APP_NAME', 'Laravel App'),

    // WhatsApp API key (if needed)
    'key' => env('WHATSAPP_KEY'),

    // Widget position on the screen (left or right)
    'position' => 'right',
];
```

--------------------------------

### Configure config/filament-whatsapp-widget.php

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Configuration file for the Filament wrapper. Defines the agent resource settings.

```php
use JeffersonGoncalves\WhatsappWidget\Models\WhatsappAgent;

return [
    'whatsapp_agent_resource' => [
        'cluster' => null,
        'model' => WhatsappAgent::class,
        'should_register_navigation' => true,
        'navigation_group' => true,
        'navigation_badge' => true,
        'navigation_sort' => -1,
        'navigation_icon' => 'heroicon-s-chat-bubble-left',
        'slug' => 'whatsapp/whatsapp-agent',
    ],
];
```

--------------------------------

### Publish migration file

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Publish the migration file for the package.

```bash
php artisan vendor:publish --tag=whatsapp-widget-migrations
```

--------------------------------

### Publish asset files

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Publish the asset files for the widget and the phone input component.

```bash
php artisan vendor:publish --tag=whatsapp-widget-assets
php artisan vendor:publish --tag=filament-phone-input-assets
```

--------------------------------

### Publish Config Files

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/resources/boost/skills/filament-whatsapp-widget-development/SKILL.md

Publish the configuration files for the core widget and the Filament resource. Use the respective tags to publish each config file.

```bash
# Core widget config
php artisan vendor:publish --tag=whatsapp-widget-config

# Filament resource config
php artisan vendor:publish --tag=filament-whatsapp-widget-config
```

--------------------------------

### WhatsappWidgetServiceProvider

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/resources/boost/skills/filament-whatsapp-widget-development/SKILL.md

The service provider injects widget views into the panel layout by registering render hooks for the head and body. It extends Spatie's PackageServiceProvider and configures the package with a config file and translations.

```php
namespace JeffersonGoncalves\Filament\WhatsappWidget;

use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Contracts\View\View;
use Spatie\LaravelPackageTools\Package;
use Spatie\LaravelPackageTools\PackageServiceProvider;

class WhatsappWidgetServiceProvider extends PackageServiceProvider
{
    public function configurePackage(Package $package): void
    {
        $package
            ->name('filament-whatsapp-widget')
            ->hasConfigFile()
            ->hasTranslations();
    }

    public function packageRegistered(): void
    {
        FilamentView::registerRenderHook(
            PanelsRenderHook::HEAD_START,
            fn (): View => view('whatsapp-widget::whatsapp-widget-head')
        );
        FilamentView::registerRenderHook(
            PanelsRenderHook::BODY_END,
            fn (): View => view('whatsapp-widget::whatsapp-widget-body')
        );
    }
}
```

--------------------------------

### Run tests with composer test

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Runs the test suite for the package using Composer. Execute this command from the project root to run all tests.

```bash
composer test
```

--------------------------------

### Utils helper class

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/resources/boost/skills/filament-whatsapp-widget-development/SKILL.md

The Utils class reads all configuration values for the resource, including navigation settings, model, cluster, and slug. It provides static methods to check if the resource is published and to retrieve various configuration options.

```php
namespace JeffersonGoncalves\Filament\WhatsappWidget\Support;

use Filament\Panel;
use JeffersonGoncalves\WhatsappWidget\Models\WhatsappAgent;

class Utils
{
    public static function isResourcePublished(Panel $panel): bool
    {
        return str(collect($panel->getResources())->values()->join(','))
            ->contains('WhatsappAgentResource');
    }

    public static function getResourceCluster(): ?string
    {
        return config('filament-whatsapp-widget.whatsapp_agent_resource.cluster', null);
    }

    public static function getWhatsappAgentModel(): string
    {
        return config('filament-whatsapp-widget.whatsapp_agent_resource.model', WhatsappAgent::class);
    }

    public static function isResourceNavigationRegistered(): bool
    {
        return config('filament-whatsapp-widget.whatsapp_agent_resource.should_register_navigation', true);
    }

    public static function isResourceNavigationGroupEnabled(): bool
    {
        return config('filament-whatsapp-widget.whatsapp_agent_resource.navigation_group', true);
    }

    public static function getResourceNavigationSort(): ?int
    {
        return config('filament-whatsapp-widget.whatsapp_agent_resource.navigation_sort');
    }

    public static function getResourceNavigationIcon(): string
    {
        return config('filament-whatsapp-widget.whatsapp_agent_resource.navigation_icon', 'heroicon-s-chat-bubble-left');
    }

    public static function getResourceSlug(): string
    {
        return (string) config('filament-whatsapp-widget.whatsapp_agent_resource.slug');
    }

    public static function isResourceNavigationBadgeEnabled(): bool
    {
        return config('filament-whatsapp-widget.whatsapp_agent_resource.navigation_badge', true);
    }
}
```

--------------------------------

### Include head template for manual usage

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Include the head template for manual usage on non-Filament pages.

```php
@include('whatsapp-widget::whatsapp-widget-head')
```

--------------------------------

### Include body template for manual usage

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Include the body template for manual usage on non-Filament pages.

```php
@include('whatsapp-widget::whatsapp-widget-body')
```

--------------------------------

### Register WhatsappWidgetPlugin in AdminPanelProvider

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Register the plugin in AdminPanelProvider.php by adding the import and the plugin call inside the plugins array.

```php
use JeffersonGoncalves\Filament\WhatsappWidget\WhatsappWidgetPlugin;

->plugins([
    WhatsappWidgetPlugin::make(),
])
```

--------------------------------

### Register the Plugin in Filament Panel

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/resources/boost/skills/filament-whatsapp-widget-development/SKILL.md

Register the plugin in your Filament panel. Add the plugin to the plugins array in the panel configuration method.

```php
use JeffersonGoncalves\Filament\WhatsappWidget\WhatsappWidgetPlugin;

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

--------------------------------

### WhatsappWidgetPlugin class

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/resources/boost/skills/filament-whatsapp-widget-development/SKILL.md

The plugin class auto-registers the WhatsappAgentResource unless a resource with the same name is already registered. It implements the Filament Plugin contract and provides a static make() factory method.

```php
namespace JeffersonGoncalves\Filament\WhatsappWidget;

use Filament\Contracts\Plugin;
use Filament\Panel;
use JeffersonGoncalves\Filament\WhatsappWidget\Resources\WhatsappAgents\WhatsappAgentResource;
use JeffersonGoncalves\Filament\WhatsappWidget\Support\Utils;

class WhatsappWidgetPlugin implements Plugin
{
    public static function make(): static
    {
        return app(static::class);
    }

    public function getId(): string
    {
        return 'filament-whatsapp-widget';
    }

    public function register(Panel $panel): void
    {
        if (! Utils::isResourcePublished($panel)) {
            $panel->resources([WhatsappAgentResource::class]);
        }
    }

    public function boot(Panel $panel): void {}
}
```

--------------------------------

### WhatsappAgentForm schema with PhoneInput

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/resources/boost/skills/filament-whatsapp-widget-development/SKILL.md

Defines the Filament form schema for the WhatsApp agent resource. Uses ysfkaya/filament-phone-input for international phone number formatting, with fields for active toggle, name, phone, text, and image upload.

```php
namespace JeffersonGoncalves\Filament\WhatsappWidget\Resources\WhatsappAgents\Schemas;

use Filament\Forms\Components\FileUpload;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Toggle;
use Filament\Schemas\Schema;
use Ysfkaya\FilamentPhoneInput\Forms\PhoneInput;
use Ysfkaya\FilamentPhoneInput\PhoneInputNumberType;

class WhatsappAgentForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                Toggle::make('active')
                    ->label(__('filament-whatsapp-widget::filament-whatsapp-widget.column.active'))
                    ->required()
                    ->columnSpanFull(),
                TextInput::make('name')
                    ->label(__('filament-whatsapp-widget::filament-whatsapp-widget.column.name'))
                    ->required()
                    ->maxLength(255),
                PhoneInput::make('phone')
                    ->label(__('filament-whatsapp-widget::filament-whatsapp-widget.column.phone'))
                    ->validateFor()
                    ->displayNumberFormat(PhoneInputNumberType::INTERNATIONAL),
                TextInput::make('text')
                    ->label(__('filament-whatsapp-widget::filament-whatsapp-widget.column.text'))
                    ->maxLength(255)
                    ->default(null),
                FileUpload::make('image')
                    ->label(__('filament-whatsapp-widget::filament-whatsapp-widget.column.image'))
                    ->image()
                    ->disk(config('whatsapp-widget.disk')),
            ]);
    }
}
```

--------------------------------

### Include WhatsApp Widget Views in Blade Layout

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/resources/boost/skills/filament-whatsapp-widget-development/SKILL.md

Include the widget head and body views in your Blade layout to display the WhatsApp widget on non-Filament pages. Place the head include in the <head> section and the body include before the closing </body> tag.

```php
{{-- In <head> --}}
@include('whatsapp-widget::whatsapp-widget-head')

{{-- Before </body> --}}
@include('whatsapp-widget::whatsapp-widget-body')
```

--------------------------------

### Override Resource with Custom WhatsappAgentResource

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/resources/boost/skills/filament-whatsapp-widget-development/SKILL.md

Register a custom resource with 'WhatsappAgentResource' in its class name before the plugin registers to override the built-in resource. The plugin checks Utils::isResourcePublished($panel) and skips auto-registration if a resource containing 'WhatsappAgentResource' is already registered.

```php
// In your PanelProvider
$panel->resources([
    \App\Filament\Resources\WhatsappAgentResource::class,
]);
```

--------------------------------

### Set widget position to left

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Sets the widget position to the left side of the page. Modify the 'position' value in the config/whatsapp-widget.php file.

```php
'position' => 'left',
```

--------------------------------

### Set widget position to right

Source: https://github.com/jeffersongoncalves/filament-whatsapp-widget/blob/3.x/README.md

Sets the widget position to the right side of the page (default). Modify the 'position' value in the config/whatsapp-widget.php file.

```php
'position' => 'right',
```
Tokens:
Raw