> For the complete documentation index, see [llms.txt](https://talltips.novate.co.uk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://talltips.novate.co.uk/livewire/sweetalert2-with-livewire.md).

# SweetAlert2 with Livewire

Use SweetAlert2 to display animated popup alert following Livewire action

Install SweetAlert in master layout

On views that expect to use SweetAlert, or in master layout file, add a listener

```javascript
window.addEventListener('swal',function(e){ 
    Swal.fire(e.detail);
});
```

Then trigger an event from Livewire component when you want to show the popup

```php
$this->dispatchBrowserEvent('swal', ['title' => 'Feedback Saved']);
```

Pass any SweetAlert config elements to style your popup

```php
$this->dispatchBrowserEvent('swal', [
	'title' => 'Feedback Saved',
	'timer'=>3000,
	'icon'=>'success',
	'toast'=>true,
	'position'=>'top-right'
]);
```

{% embed url="<https://sweetalert2.github.io/#usage>" %}

You might instead use this package;

{% embed url="<https://github.com/jantinnerezo/livewire-alert>" %}