CODEWITHSUNDEEP
phptwilio
three3
three3

Reputation: 2846

Adding Answer Button To Twilio Client

This might sound like a stupid question but i'm going through the client quickstart tutorials and i want to know how to require a button click to answer on the client side. on example: hello-client-monkey-3.php it just picks up after one ring, i would like to add a pick up button on the page? how can i do this?

I have tried the following code but it does not seem to work:

function answer() {
    Twilio.Device.accept();
}

<button onclick="answer();">
    Answer
</button>

Any help is GREATLY appreciated

Upvotes: 4

Views: 592

Answers (2)

Joseph Valentine
Joseph Valentine

Reputation: 43

I couldn't get my head around this either. The lovely people at Twilio provided me with this answer:

There are a couple ways I've seen it done. One way is to store the incoming connection in a temporary variable, e.g. incoming_conn

  var incoming_conn = null;

  Twilio.Device.incoming(function(connection) {
    incoming_conn = connection;
  });

  function accept() {
    if (incoming_conn) {
      incoming_conn.accept();
      accepted_conn = incoming_conn;
      incoming_conn = null;
    }
  }

(Me) Then you will need to call that function from your UI:

  <button onclick="accept();">
      Answer
  </button>

Another way would be to attach a click handler to the accept button, which is easier if you use jQuery, e.g.

  Twilio.Device.incoming(function(connection) {
    $("#answer").click(function() {
        connnect.accept();
    });

That assumes your button has class "answer":

<button id="answer">
    Answer
</button>

Upvotes: 2

Tim Lytle
Tim Lytle

Reputation: 17624

It's not the 'device' that can accept the call, it's the connection. From the docs:

Twilio.Device.incoming(function(connection) {
  connection.accept();
  // do awesome ui stuff here
  // $('#call-status').text("you're on a call!");
});

So your answer button has to know about the connection not the Device. Probably best to create the answer button when Twilio.Device has a new incoming connection, and then onclick accept that specific connection.

Upvotes: 0

Related Questions