Hello, web develoopers! In this article, I'll walk you through a simple example of integrating WhatsApp API into a Laravel application. We'll be using Twilio, a cloud communications platform that provides a powerful API for sending WhatsApp messages.
Twilio is widely known for its ease of use and scalability. It supports various programming languages, making it a popular choice for developers looking to add voice, messaging, and video functionality to their applications.
With Twilio, you can effortlessly integrate features like SMS messaging, voice calls, and two-factor authentication, all of which help businesses enhance customer communication and engagement.
In this example, we'll use the twilio/sdk package to send WhatsApp messages. Twilio's WhatsApp API allows you to send both text messages and media to WhatsApp users programmatically.
We'll create a simple form with fields for a phone number and a message, and then use that form to send a WhatsApp message to the specified number.
How to Send WhatsApp Messages in Laravel 10
In this step, we'll install laravel 10 application using the following command.
composer create-project --prefer-dist laravel/laravel laravel-10-example
Then, we'll required to create and add phone number. Then you can easily get account SID, Token and Number.
Create Twillio Account: www.twilio.com
.env
TWILIO_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token
TWILIO_WHATSAPP_NUMBER=your_twilio_whatsapp_number
Now, we'll install twillo/sdk composer package using the following command.
composer require twilio/sdk
Then, define the routes into the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\WhatsAppController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('whatsapp', [WhatsAppController::class, 'index']);
Route::post('whatsapp', [WhatsAppController::class, 'store'])->name('whatsapp.post');
Next, we'll create WhatsAppController.php file and add the following code to that file.
app/Http/Controllers/WhatsAppController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Twilio\Rest\Client;
use Exception;
class WhatsAppController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index()
{
return view('whatsapp');
}
/**
* Write code on Method
*
* @return response()
*/
public function store(Request $request)
{
$twilioSid = env('TWILIO_SID');
$twilioToken = env('TWILIO_AUTH_TOKEN');
$twilioWhatsAppNumber = env('TWILIO_WHATSAPP_NUMBER');
$recipientNumber = $request->phone;
$message = $request->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()]);
}
}
}
Then, we'll create blade file and add the following HTML code to that file.
resources/views/whatsapp.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to Send WhatsApp Messages in Laravel 10 - Vidvatek</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/[email protected]/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>How to Send WhatsApp Messages in Laravel 10 - Vidvatek</h2>
</div>
<div class="card-body">
<form method="POST" action="{{ route('whatsapp.post') }}">
{{ csrf_field() }}
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<strong>{{ $message }}</strong>
</div>
@endif
@if ($message = Session::get('error'))
<div class="alert alert-danger alert-block">
<strong>{{ $message }}</strong>
</div>
@endif
<div class="mb-3">
<label class="form-label" for="inputName">Phone:</label>
<input
type="text"
name="phone"
id="inputName"
class="form-control @error('phone') is-invalid @enderror"
placeholder="Phone Number">
@error('phone')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mb-3">
<label class="form-label" for="inputName">Message:</label>
<textarea
name="message"
id="inputName"
class="form-control @error('message') is-invalid @enderror"
placeholder="Enter Message"></textarea>
@error('message')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mb-3">
<button class="btn btn-success btn-submit">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Now, run the laravel 10 application using the following command.
php artisan serve
You might also like:
- Read Also: Laravel 10 Eloquent Model Search Query
- Read Also: Customize Validation Error Message in Laravel 10
- Read Also: How to Display Alert Message in React Native
- Read Also: How to Create a Newsletter Step by Step in Laravel 10