how to use twilio whatsapp api in laravel?

521 views Asked by At

i have used the twilio WhatsApp API in my project, below is my code,

Routes

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();         

        $message = $twilio->messages
                        //->create("+917412365474", // to $receiverphone +5511959127852
                        ->create("whatsapp:+5511959127852", // to
                        [
                            //"body"     => "Hello, there! Welcome to PharmaPro asdas",
                            "body"     => $wpmwssage,
                            "mediaUrl" => [url('/wpattachment/'.$wpattachment)],                                
                            //"from"     => $sendernumber
                            "from" => "whatsapp:+14155238886",
                        ]
        );
        return redirect()->back()->with('success', 'Message sent successfully...!');
    } else {
        return redirect()->back()->with('error', 'No file uploaded');
    }       
}
?>

now i want to use dynamic phone number here, like i have created a HTML form for that, user can send whatsapp message using API,

now my question is how to use Dynamic phone number here?

<?php 
$message = $twilio->messages                            
    ->create("whatsapp:+5511959127852", // how to use dynamic number here?
    [
        //"body"     => "Hello, there! Welcome to PharmaPro asdas",
        "body"     => $wpmwssage,
        "mediaUrl" => [url('/wpattachment/'.$wpattachment)],                                
        //"from"     => $sendernumber
        "from" => "whatsapp:+14155238886", //how to use dynamic number here?
    ]
);
?>

how to use dynamic number here?like from blade file. and also how to get receivers message from whatsapp, using this twilio whatsapp API?

<div class="whatsapp_share">
<?php $phoneno = "1234567890"; $textmessage = "Welcome to My SIte"; ?>
  <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;">
    <span class="close-button" onclick="closePopup()">X</span>
    <form action="{{ url('/whatsapp_send_message') }}" method="post" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="receiverphone" value="{{ $jobdata->phone }}">                
        <div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-5">
          <div class="MuiBox-root jss17">
            <div class="jss18">
              <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>

above is my blade file code,that send whatsapp message with Media, there is one field in this code i add one hidden field that get the phone number using php code,

<input type="hidden" name="receiverphone" value="{{ $jobdata->phone }}"> 

that receiver phone number i send in my cotroller code,

$receiverphone = $request->receiverphone;

and now sender phone number i have set in environment file, and get from like below code in my controler code,

$sendernumber = getenv("TWILIO_PHONE");

now i have both phone number in in variable $receiverphone, $sendernumber, now how can i set that both the number in twilio whatsapp api? basically I'm trying to do dynamic phone number here.

$message = $twilio->messages
->create("whatsapp:+15005550006", // $receiverphone
         [
             "from" => "whatsapp:+14155238886", //$sendernumber
             "body" => "Hello, there!"
         ]
)

now sender has send the message usin twilio api, now if receiver also send reply, that reply how can i get? using this API?

Errors after sending Message,

Errors and Warnings

Warning

63016 Failed to send freeform message because you are outside the allowed window. If you are using WhatsApp, please use a Message Template.

Description

Failed to send freeform message because you are outside the allowed window. If you are using WhatsApp, please use a Message Template. There were no HTTP Requests logged for this event.

1

There are 1 answers

6
IObert On

You get this error because you try to send a message outside of a 24 hour session.

Within the first 24 hours of a user's message, businesses can send freeform messages, which means they can send any type of message, including text, images, videos, documents, or other forms of content. These messages can be personalized and customized according to the specific needs of the conversation.

However, once the 24-hour session window expires, businesses are restricted from sending freeform messages. Instead, they can only use pre-approved message templates to initiate conversations or respond to user inquiries. These message templates must fall under specific approved categories and contain predefined message components.

You can find more details on this Twilio Support page.