Tawk Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require larbrary/tawk
   

   Publish the config file:

   php artisan vendor:publish --provider="Larbrary\Tawk\TawkServiceProvider"
   

2. Configuration Edit config/tawk.php with your Tawk.to Property ID and optional settings:

   'property_id' => env('TAWK_PROPERTY_ID'),
   'script_url' => env('TAWK_SCRIPT_URL', 'https://embed.tawk.to/'),
   

3. First Use Case Add the widget to your app.blade.php (or master layout):

   @tawk
   

   Or manually in a view:

   {!! \Larbrary\Tawk\Facades\Tawk::render() !!}
   

Implementation Patterns

Common Workflows

1. Dynamic Property ID Override the config per environment or route:

   // In a controller/middleware
   \Larbrary\Tawk\Facades\Tawk::setPropertyId('dynamic-12345');
   

2. Conditional Rendering Only show the widget for logged-out users:

   @auth
       <!-- No widget -->
   @else
       @tawk
   @endauth
   

3. Custom Script Attributes Add custom data attributes (e.g., for analytics):

   \Larbrary\Tawk\Facades\Tawk::setAttributes(['data-custom' => 'value']);
   

4. Queueing for SPAs For single-page apps, defer rendering until JavaScript loads:

   // In your JS bundle
   document.addEventListener('DOMContentLoaded', () => {
       const script = document.createElement('script');
       script.src = 'https://embed.tawk.to/YOUR_ID/default';
       document.body.appendChild(script);
   });
   

Integration Tips

• Blade Directives: Prefer @tawk for simplicity; use the facade (\Larbrary\Tawk\Facades\Tawk::render()) for dynamic logic.
• Asset Optimization: Exclude the Tawk script from Laravel Mix if using dynamic rendering (e.g., via JavaScript).
• Testing: Mock the facade in PHPUnit:

  $this->partialMock(\Larbrary\Tawk\Facades\Tawk::class, function ($mock) {
      $mock->shouldReceive('render')->andReturn('<script>...</script>');
  });
  

Gotchas and Tips

Pitfalls

1. Script URL Hardcoding The package defaults to https://embed.tawk.to/, but Tawk may change this. Always verify the URL in config/tawk.php.

2. Caching Issues If using a CDN or caching layer (e.g., Varnish), ensure the Tawk script isn’t cached aggressively. Add cache-busting:

   'script_url' => 'https://embed.tawk.to/' . env('TAWK_VERSION', 'latest'),
   

3. Blade Directive Scope The @tawk directive renders once per view. Avoid nesting it in loops or conditionals unless intentional.

4. Missing Facade Alias If using the facade fails, ensure the alias is registered in config/app.php:

   'aliases' => [
       'Tawk' => \Larbrary\Tawk\Facades\Tawk::class,
   ],
   

Debugging

• Verify Property ID: Check config/tawk.php and .env for typos in TAWK_PROPERTY_ID.
• Inspect Rendered Output: Use @dd(\Larbrary\Tawk\Facades\Tawk::render()) to debug the generated script tag.
• Network Tab: Confirm the Tawk script loads in browser dev tools (look for embed.tawk.to).

Extension Points

1. Custom Script Content Override the default script by binding to the tawk.render event:

   \Event::listen('tawk.render', function ($script) {
       $script->setContent('<script custom="true">...</script>');
   });
   

2. Environment-Specific Config Use Laravel’s config caching to switch Property IDs per environment:

   'property_id' => config('app.env') === 'production' ? 'prod-id' : 'dev-id',
   

3. Local Development Disable the widget in config/tawk.php for local testing:

   'enabled' => env('APP_ENV') !== 'local',