JavaScript

Create a client side application

Create an HTML file called client_js.html in your project directory. Add the following code, but make sure you paste in the JWT you generated for the user in the earlier step in this tutorial:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="./node_modules/nexmo-client/dist/nexmoClient.js"></script>
</head>
<body>

  <h1>Inbound PSTN phone call</h1>
  <p id="notification">Lines are open for calls...</p>
  <br />
  <button type="button" id="answer">Answer</button>
  <button type="button" id="reject">Reject</button>
  <button type="button" id="hangup">Hang Up</button>
  <script>

    new NexmoClient({ debug: true })
    .createSession("PASTE ALICE JWT HERE")
    .then(app => {

        const answerBtn = document.getElementById("answer");
        const rejectBtn = document.getElementById("reject");
        const hangupBtn = document.getElementById("hangup");
        const notification = document.getElementById("notification");

        app.on("member:call", (member, call) => {
            notification.textContent = "You are receiving a call";
            // Answer the call.
            answerBtn.addEventListener("click", () => {
                call.answer();
                notification.textContent = "You are in a call";
            });
            // Reject the call
            rejectBtn.addEventListener("click", () => {
                call.reject();
                notification.textContent = `You rejected the call`;
            });
            // Hang-up the call
            hangupBtn.addEventListener("click", () => {
                call.hangUp();
                notification.textContent = `You ended the call`;
            });
        });

        app.on("call:status:changed", (call) => {
          notification.textContent = "Call Status: " + call.status;
        });
    })
    .catch((error) => {
        console.error(error);
    });
  </script>
</body>
</html>

This is your web application that uses the Client SDK to accept an inbound call.

The main features of this code are:

A notification box that can be updated with the call status.
A button used when the agent wants to answer an inbound call.
A button used when the agent wants to reject an inbound call.
A button used when the agent wants to hang-up an inbound call.
The code logs the agent in using the user JWT generated in an earlier step.
The code sets up two main event handlers. The first is fired on the inbound call. This in turn sets up 3 click button event handlers which answers, rejects and hangs-up the inbound call using the Client SDK method call.answer(),call.reject(), and call.hangUp() respectively.
The second, the call status changed (call:status:changed) event handler sets the text of the notification box to the inbound call status.