> 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

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>" %}