Laravel 11 Send Whatsapp Messages Tutorial

by

If you’re new to the Messages API, it allows you to send text, images, and videos through various channels like Facebook Messenger, Viber, WhatsApp, and SMS. Vonage offers a sandbox testing environment for experimenting with these features. In this tutorial, we’ll use Vonage’s sandbox to explore WhatsApp messaging with a demo Laravel application that I’ve already configured.

Twilio offers a PHP SDK that assists developers in sending SMS or WhatsApp messages from a Laravel 11 application.

Here’s a step-by-step guide to creating an application that sends WhatsApp messages using Laravel.

Step 1 – Create a Twilio Account

Navigate to Twilio’s website and sign up for an account to obtain your secret ID and key for WhatsApp messaging.

Update your .env file with your Twilio credentials:

TWILIO_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token
TWILIO_WHATSAPP_NUMBER=your_twilio_whatsapp_number

Step 2 – Install the Twilio SDK

Execute the following command to add the Twilio PHP SDK to your project:

composer require twilio/sdk

Step 3 – Define Routes

Modify the routes/web.php file to set up routes for handling SMS requests:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\WhatsAppController;

Route::get('whatsapp', [WhatsAppController::class, 'index']);
Route::post('whatsapp', [WhatsAppController::class, 'store'])->name('whatsapp.post');

Step 4 – Create a Controller

Generate a controller named WhatsAppController.php using the Artisan command:

php artisan make:controller WhatsAppController

Edit app/Http/Controllers/WhatsAppController.php to implement the functionality for sending WhatsApp messages:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Twilio\Rest\Client;
use Exception;

class WhatsAppController extends Controller
{
    /**
     * Display the WhatsApp form.
     *
     * @return \Illuminate\View\View
     */
    public function index()
    {
        return view('whatsapp');
    }

    /**
     * Handle the form submission and send a WhatsApp message.
     *
     * @param \Illuminate\Http\Request $request
     * @return \Illuminate\Http\RedirectResponse
     */
    public function store(Request $request)
    {
        $twilioSid = env('TWILIO_SID');
        $twilioToken = env('TWILIO_AUTH_TOKEN');
        $twilioWhatsAppNumber = env('TWILIO_WHATSAPP_NUMBER');
        $recipientNumber = $request->input('phone');
        $message = $request->input('message');

        try {
            $twilio = new Client($twilioSid, $twilioToken);

            $twilio->messages->create(
                $recipientNumber,
                [
                    "from" => "whatsapp:+". $twilioWhatsAppNumber,
                    "body" => $message,
                ]
            );

            return back()->with('success', 'WhatsApp message sent successfully!');
        } catch (Exception $e) {
            return back()->with('error', $e->getMessage());
        }
    }
}

Step 5 – Create a Blade View

In the resources/views directory, create a file named whatsapp.blade.php with the following content to provide a form for sending WhatsApp messages:

<!DOCTYPE html>
<html>
<head>
    <title>Send WhatsApp Messages with Laravel 11</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">
                        <h2>Send WhatsApp Messages with Laravel 11</h2>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('whatsapp.post') }}">
                            @csrf

                            @if ($message = Session::get('success'))
                                <div class="alert alert-success">
                                    <strong>{{ $message }}</strong>
                                </div>
                            @endif

                            @if ($message = Session::get('error'))
                                <div class="alert alert-danger">
                                    <strong>{{ $message }}</strong>
                                </div>
                            @endif

                            <div class="mb-3">
                                <label class="form-label" for="phone">Phone:</label>
                                <input 
                                    type="text" 
                                    name="phone" 
                                    id="phone"
                                    class="form-control @error('phone') is-invalid @enderror" 
                                    placeholder="Enter Phone Number">

                                @error('phone')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="message">Message:</label>
                                <textarea 
                                    name="message" 
                                    id="message"
                                    class="form-control @error('message') is-invalid @enderror" 
                                    placeholder="Enter your message"></textarea>

                                @error('message')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <button class="btn btn-success">Send Message</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Step 6 – Test Your Application

Start the application server with the following command:

php artisan serve

Then, open your browser and navigate to http://localhost:8000/whatsapp to test the application.