question

Add this Javascript function to your code. Detect the event and do/show whatever you want to do with them,

window.addEventListener('message', (e) => {
  const data = e.data;
  if (data.call && data.call.direction == 'Inbound'){
    console.log(`Incoming call from: ${data.call.from.phoneNumber}. Call status: ${data.call.telephonyStatus}`)
    if (data.call.telephonyStatus == 'Ringing')
        console.log("Incoming call ringing")
  }
  if (data) {
    switch (data.type) {
      case 'rc-call-ring-notify':
        // when user gets a ringing call
        console.log("RINGING...")
        console.log(data.call);
        break;
      case 'rc-call-init-notify':
        // when user creates a call from dial
        console.log("SETUP...")
        console.log(data.call);
        break;
      case 'rc-call-start-notify':
        // when a incoming call is accepted or a outbound call is connected
        console.log("INCOMING RING...")
        console.log(data.call);
        break;
      case 'rc-call-hold-notify':
        // when user holds a call
        console.log(data.call);
        break;
      case 'rc-call-resume-notify':
        // when user unholds call
        console.log(data.call);
        break;
      case 'rc-call-end-notify':
        // when call ended
        console.log("TERMINATING...")
        console.log(data.call);
        break;
      case 'rc-call-mute-notify':
        // when muted or unmuted event
        console.log(data.call);
        break;
      case 'rc-message-updated-notify':
        console.log("VOICEMAIL?")
        console.log(data.message.type)
        console.log(data.message.uri)
        break
      default:
        console.log("OTHERS...")
        //console.log(data);
        break;
    }
  }
});