I’m using Laravel Livewire with app.blade.php as the main layout for all pages. The app.blade.php file includes dynamic content using {{$slot}}. I’ve created a separate Livewire component for the Tawk.to widget (TawkWidget) and included it in the layout.
app.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
@livewireStyles
</head>
<body>
<livewire:header />
{{ $slot }}
<livewire:footer />
<livewire:tawk-widget />
@livewireScripts
</body>
</html>
tawk-widget.blade.php:
<div id="tawk-widget-container" wire:ignore>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
(function () {
var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
s1.async = true;
s1.src = 'https://embed.tawk.to/id-provided/some-id';
s1.charset = 'UTF-8';
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})();
</script>
<!--End of Tawk.to Script-->
</div>
How I change component:
return cache()->remember('about-us-v10', 31536000, function () {
return view('livewire.about-us')->layout('app')->render();
});
Issues:
- On the initial page load, the Tawk.to widget works perfectly, and its is injected into the DOM.
- After switching Livewire components (updating the {{$slot}}), the widget disappears, and the is not re-injected.
What I Tried:
- Used wire:ignore in the widget component to prevent Livewire from interfering with the widget’s container.
- Triggered reinitialization of the script on livewire:update and livewire:load events.
- Moved the script directly into app.blade.php.
- Tried @script and @endscript
Expected:
The Tawk.to widget should remain visible and functional across Livewire component changes, or it should reinitialize if needed.
How can I ensure the Tawk.to widget persists or reloads correctly after Livewire component changes? Any advice on handling third-party scripts with Livewire?