I have used Twilio WhatsApp api for my Laravel project, for that, I have created Routes, Controler and Blade file, below is my full code.
Route
Route::post('whatsapp_send_message','Front_managerController@WhatsappSendMessage');
Controller
<?php
public function WhatsappSendMessage(Request $request)
{
$receiverphone = $request->receiverphone;
$wpmwssage = $request->wpmwssage;
$sid = getenv("TWILIO_ACCOUNT_SID");
$token = getenv("TWILIO_AUTH_TOKEN");
$sendernumber = getenv("TWILIO_PHONE");
$twilio = new Client($sid, $token);
if($request->hasFile('attachment')) {
$uploadedFile = $request->file('attachment');
$wpattachment = time(). '-' . uniqid() . '.' . $uploadedFile->getClientOriginalExtension();
$mediaUrl = $uploadedFile->move(public_path('wpattachment/'), $wpattachment);
// Save the message to the database
$message = new WhatsappMessage();
$message->job_id = $request->job_id;;
$message->sender_phone_number = $sendernumber;
$message->receiver_phone_number = $receiverphone;
$message->wp_sender_mesage = $wpmwssage;
$message->attachment = $wpattachment;
$message->save();
$twilio->messages->create("whatsapp:{$receiverphone}",
[
"from" => "whatsapp:+14155238886",
//"from" => $sendernumber
"body" => $wpmwssage,
//"body" => "Hello, there! Welcome to PharmaPro asdas",
"mediaUrl" => [asset('/wpattachment/'.$wpattachment)],
]
);
return redirect()->back()->with('success', 'Message sent successfully...!');
} else {
return redirect()->back()->with('error', 'No file uploaded');
}
}
?>
Blade file
<div class="whatsapp_share">
<div id="df-btn-cont">
<div class="df-btn df-closed">
<a href="javascript:void(0);" class="df-btn-text" id="open-popup">
<svg class="df-svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
<path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>
</svg>
Chat with us
</a>
</div>
</div>
<div id="popup-form" style="display: none;">
<form action="{{ url('/whatsapp_send_message') }}" method="post" enctype="multipart/form-data">
@csrf
<input type="hidden" name="receiverphone" value="{{ $jobdata->phone }}">
<input type="hidden" name="sender" value="">
<input type="hidden" name="job_id" value="{{ $jobdata->job_id }}">
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-5">
<div class="MuiBox-root jss17">
<div class="jss18"> <span class="close-button" onclick="closePopup()">X</span>
<div class="jss19">
<div class="jss20">
<div class="MuiGrid-root MuiGrid-container MuiGrid-align-items-xs-center" style="height: 100%;">
<div class="MuiGrid-root MuiGrid-item">
<svg class="MuiSvgIcon-root jss22" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
</svg>
</div>
<div class="MuiGrid-root MuiGrid-item">
<h4 class="MuiTypography-root MuiTypography-h4" style="color: rgba(0, 0, 0, 0.7);">{{ $jobdata->phone }} </h4>
</div>
</div>
</div>
<?php
$wpmessages = DB::table('whatsapp_messages')->select('*')->where('job_id',$jobdata->job_id)->first();
if(isset($wpmessages)){
$dateTime = $wpmessages->created_at;
$carbonDate = \Carbon\Carbon::parse($dateTime);
$formattedTime = $carbonDate->format('H:i');
}
?>
<div class="chat-container">
<div class="message-box my-message">
@if (isset($wpmessages->wp_sender_mesage))
<p>{{ $wpmessages->wp_sender_mesage }}<br><span>{{ $formattedTime }}</span></p>
@endif
</div>
<div class="message-box my-message">
@if (isset($wpmessages->attachment))
<div id="attachment-preview-1">
<a target="_blank" href="{{ asset('wpattachment/'.$wpmessages->attachment) }}"><img src="{{ asset('wpattachment/pdf_format.png') }}" height="50px"> </a></span>
</div>
@endif
</div>
<div class="attachment-preview" id="attachment-preview" style="display: none;">
<div id="pdf-icon"></div>
<span id="attachment-file-name"></span>
</div>
<div class="message-box friend-message">
@if (isset($wpmessages->wp_receiver_mesage))
<p>{{ $wpmessages->wp_receiver_mesage }}<br>
<span>07:49</span></p>
@endif
</div>
</div>
<div class="jss21">
<div class="MuiGrid-root MuiGrid-container MuiGrid-align-items-xs-center" style="height: 100%;">
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true">
<div class="MuiFormControl-root MuiTextField-root jss23">
<div class="MuiInputBase-root MuiInput-root MuiInputBase-formControl MuiInput-formControl">
<input aria-invalid="false" placeholder="Type a message" type="text" name="wpmwssage" class="MuiInputBase-input MuiInput-input" value="">
</div>
</div>
</div>
<div class="MuiGrid-root MuiGrid-item">
<input type="file" name="attachment" style="display: none;" id="attachment-input">
<label for="attachment-input" class="attachment-icon">
<svg class="MuiSvgIcon-root attachment" viewBox="0 0 1024 1024" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s0.9 4.7 2.6 6.4l36.9 36.9c3.5 3.5 9.2 3.5 12.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h0.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s0.9 4.7 2.6 6.4l36.9 36.9c3.5 3.5 9.2 3.5 12.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1C192 634.9 174 678.4 174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c0.1-64.6-25.1-125.3-70.7-170.9z" />
</svg>
</label>
</div>
<div class="MuiGrid-root MuiGrid-item">
<button type="submit" name="submit" class="clickable-button">
<svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" style="margin-right: 8px;">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
this whole code sends the message in WhatsApp using Twilio api's, now my main question is, this code sent the Whatsapp message successfully but now how can I get the receiver message when the sender sends the message using the above code,
You can receive that via a webhook
You can find a detailed explanation on Twilio webhooks in PHP in this guide. The
$body
variable will contain the payload of the message: