genealabs/laravel-tawk

Integrate Tawk.to into yoru Laravel and Nova apps.

Maintainers

Package info

github.com/mikebronner/laravel-tawk

Type:laravel-package

pkg:composer/genealabs/laravel-tawk

Fund package maintenance!

mikebronner

Statistics

Installs: 1 234

Dependents: 0

Suggesters: 0

Stars: 11

Open Issues: 0

13.0.0 2026-03-29 15:52 UTC

README

Tawk for Laravel masthead image.

Easily and quickly integrate Tawk.to LiveChat into your laravel app in under 5 minutes!

Features

  • all the default Tawk.to LiveChat features.
  • automatic user identification (for logged-in users).
  • secure chat API (for logged-in users).

Requirements

  • PHP 8.2+
  • Laravel 8.0+

Supported Versions

PHP Laravel
8.2 8.x – 13.x
8.3 8.x – 13.x
8.4 8.x – 13.x
8.5 8.x – 13.x

Installation

composer require "genealabs/laravel-tawk:*"

Configuration

Refer to the Property Settings page in your Tawk.to dashboard for the required values. Add the following to your .env file:

TAWK_API_KEY=xxxxxxxxxxxxxxx
TAWK_SITE_ID=yyyyyyyyyyyyyyy

Implementation

Laravel App

Add the following to your layout blade template immediately before the closing </body> tag:

            @tawk
//      </body>
// </html>

Laravel Nova

If you are using Laravel Nova as a dashboard for your users, first publish the layout blade template, then insert the blade directive immediate prior to the closing </body> tag in resources/views/vendor/nova/layout.blade.php:

            @tawk
//      </body>
// </html>

Troubleshooting

Blank page / Tawk widget not appearing

  1. Check your .env values: Ensure TAWK_SITE_ID and TAWK_API_KEY are set correctly. You can find these in your Tawk.to dashboard under Property Settings.
  2. Clear config cache: Run php artisan config:clear after updating .env.
  3. Check the HTML source: View your page source and look for the Tawk.to script tag. If it's missing entirely, the @tawk directive may not be in your layout. If it shows a comment about missing TAWK_SITE_ID, update your .env.
  4. Check browser console: Open the browser developer tools console for JavaScript errors.
  5. Verify the directive placement: The @tawk directive must be placed immediately before the closing </body> tag in your layout blade template.

Console Capture

To automatically send the visitor's browser console output (errors, warnings, logs) to Tawk.to when a chat starts, add the following to your .env:

TAWK_CAPTURE_CONSOLE=true

When enabled, the last 50 console entries are captured and sent as custom attributes when a visitor initiates a chat. This includes:

  • Console errors, warnings, and logs
  • Unhandled JavaScript errors
  • Unhandled promise rejections

The data appears in the Tawk.to agent dashboard as custom visitor attributes.

Screenshot Capture

To automatically take a screenshot of the page when a visitor starts a chat, add the following to your .env:

TAWK_CAPTURE_SCREENSHOT=true

When enabled, html2canvas (loaded from CDN) captures the visible page and sends it as a Tawk.to custom attribute. The screenshot appears in the agent dashboard as a base64 JPEG image.

Note: Screenshots are compressed (50% scale, 60% JPEG quality) to stay within Tawk.to's attribute size limits. Very large pages may exceed the limit and the screenshot will be skipped.