how to get receivers whatsapp message using twilio whatsapp API?

202 views Asked by At

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,

1

There are 1 answers

2
IObert On

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:

<?php
// Get the PHP helper library from https://twilio.com/docs/libraries/php

require_once 'vendor/autoload.php'; // Loads the library
use Twilio\TwiML\MessagingResponse;

$body = $_REQUEST['Body'];

$response = new MessagingResponse;
$message = $response->message("");
$message->body("The Robots are coming! Head for the hills!");
$message->media("https://farm8.staticflickr.com/7090/6941316406_80b4d6d50e_z_d.jpg");
print $response;