Laravel Tawk Laravel Package

Getting Started

1. Installation: Require the package via Composer:

   composer require mikebronner/laravel-tawk
   

2. Publish Config: Publish the configuration file to customize settings:

   php artisan vendor:publish --provider="MikeBronner\LaravelTawk\TawkServiceProvider"
   

3. Configure .env: Add your Tawk.to site ID:

   TAWK_SITE_ID=your_site_id_here
   

4. First Use Case: Enable the widget in app/Providers/AppServiceProvider.php:

   use MikeBronner\LaravelTawk\Facades\Tawk;
   
   public function boot()
   {
       Tawk::init();
   }
   

   The widget will now appear on all pages. For dynamic control, use:

   Tawk::init(['enabled' => false]); // Disable on specific pages
   

Implementation Patterns

Core Integration

• Dynamic Enablement: Use middleware or service logic to toggle Tawk dynamically:

  // app/Http/Middleware/EnableTawk.php
  public function handle($request, Closure $next)
  {
      if (auth()->check()) {
          Tawk::init(['enabled' => false]);
      }
      return $next($request);
  }
  

• Event-Based Triggers: Leverage Tawk's new features (e.g., screenshots/console logs) via JavaScript events:

  // resources/js/app.js
  window.addEventListener('tawk:chatStart', () => {
      console.log('Chat started! Screenshot and console logs will auto-capture.');
  });
  

Advanced Features

• Custom Data Passing: Attach user-specific data to chats:

  Tawk::init([
      'properties' => [
          'user_id' => auth()->id(),
          'user_email' => auth()->user()->email,
      ],
  ]);
  

• Conditional Loading: Load Tawk only on specific routes:

  Route::get('/support', function () {
      Tawk::init(['enabled' => true]);
      return view('support');
  });
  

Frontend Integration

• Manual Trigger: Force Tawk to open via JavaScript:

  TawkAPI.toggle();
  

• Custom Styling: Override Tawk’s CSS via your app.css:

  .tawk-button {
      background: #your-color !important;
  }
  

Gotchas and Tips

Configuration Pitfalls

• Missing TAWK_SITE_ID: Fixed in v13.0.0, but ensure it’s set in .env to avoid blank pages. Test with:

  php artisan config:clear
  

• Laravel 13 Compatibility: The package now supports Laravel 13’s new bootstrapping. If using older Laravel, pin the package version:

  "mikebronner/laravel-tawk": "^12.0"
  

Debugging

• Console/Screenshot Capture: Verify these features work by checking the Tawk dashboard under "Chat Transcripts." If missing:
  • Ensure TAWK_ENABLE_CONSOLE_CAPTURE and TAWK_ENABLE_SCREENSHOT are true in config.
  • Test in a real browser (not incognito mode) to avoid ad-blocker interference.
• JavaScript Conflicts: If Tawk fails to load, check for conflicts with other chat widgets or ad-blockers. Use:

  window.TawkAPI = window.TawkAPI || {};
  

Extension Points

• Custom Events: Extend functionality by listening to Tawk’s events:

  document.addEventListener('tawk:chatEnd', (e) => {
      // Log chat end to your analytics
  });
  

• Middleware Hooks: Use Laravel’s middleware to modify Tawk properties before initialization:

  public function handle($request, Closure $next)
  {
      $request->merge(['tawk_properties' => ['custom_key' => 'value']]);
      return $next($request);
  }
  

  Then access in AppServiceProvider:

  Tawk::init($request->tawk_properties ?? []);
  

Performance

• Lazy Loading: For SPAs or slow pages, load Tawk asynchronously:

  <script src="https://embed.tawk.to/YOUR_SITE_ID/default.js" async></script>
  

• Conditional Loading: Disable Tawk on admin routes or non-critical pages to reduce payload:

  if (app()->environment('production') && !Route::current()->isSupportRoute()) {
      Tawk::init(['enabled' => false]);
  }