Как обработать входящий вызов#

Бета-версия

Функциональность находится в режиме бета-версии. Функции могут быть изменены, а также могут работать нестабильно. В будущем за функционал может взиматься дополнительная плата.
Подключение к функционалу можно запросить через техподдержку GREEN-API

Для обработки входящего вызова запускается событие incoming-call. Это событие передает callId (номер телефона) и wid (WhatsApp ID пользователя).

В общем виде пример кода выглядит как:

greenApiClient.addEventListener('incoming-call', (event) => {
  const { callId, wid } = event.detail.info;
  console.log('Incoming call from:', wid.user, 'Call ID:', callId);

  // Automatically accept the call (or show UI to the user)
  greenApiClient.acceptCall().then(() => {
    console.log('Call accepted.');
  }).catch(error => {
    console.error('Error accepting call:', error);
  });
});

В наших рабочих примерах для обработки входящих вызовов мы использовали всплывающее окно, с двумя функциями -- принять и отклонить вызов.

const incomingCallPortal = document.getElementById('incoming-call-portal');
const incomingCallPhone = document.getElementById('incoming-call-phone');
const acceptCallButton = document.getElementById('acceptCallButton');
const rejectCallButton = document.getElementById('rejectCallButton');

let incomingCallTimeout = null;

greenApiClient.addEventListener("incoming-call", (event) => {
  incomingCallPhone.textContent = event.detail.info.wid.user;
  incomingCallPortal.style.display = 'flex';

  incomingCallTimeout = setTimeout(() => {
    incomingCallPortal.style.display = 'none';
  }, event.detail.timeout * 1000);
});

acceptCallButton.addEventListener('click', async () => {
  if (incomingCallTimeout !== null) {
    clearTimeout(incomingCallTimeout);
    incomingCallPortal.style.display = 'none';
  }

  const accepted = await greenApiClient.acceptCall();
  console.log(`acceptCall result: ${accepted}`);
});

rejectCallButton.addEventListener('click', async () => {
  if (incomingCallTimeout !== null) {
    clearTimeout(incomingCallTimeout);
    incomingCallPortal.style.display = 'none';
  }

  const rejected = await greenApiClient.rejectCall();
  console.log(`rejectCall result: ${rejected}`);
});

Так же понадобилось дописать необходимые значения в HTML и CSS файлы соответственно.

    <div id="incoming-call-portal">
      <section class="incoming-call-modal">
        <section>
          Incoming call: <span id="incoming-call-phone">79836200181</span>
        </section>
        <sectio>
          <button class="incoming-call-reject" id="rejectCallButton">reject</button>
          <button class="incoming-call-accept" id="acceptCallButton">accept</button>
        </sectio>
      </section>
    </div>

И CSS

.incoming-call-modal {
    width: 300px;
    height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;

    background: white;
    box-shadow: 0 0 10px #000000;
}

.incoming-call-reject {
    border: none;
    background: none;

    width: 100px;
    height: 30px;

    border-radius: 10px;

    color: #e8e8e8;
    background: #c53c3c;
}

.incoming-call-reject:hover {
    cursor: pointer;
    color: white;
    background: #e34242;
}

.incoming-call-accept {
    border: none;
    background: none;

    width: 100px;
    height: 30px;

    border-radius: 10px;

    color: #e8e8e8;
    background: #11911d;
}

.incoming-call-accept:hover {
    cursor: pointer;
    color: white;
    background: #11a41e;
}

Так же не рекомендуется использовать кнопку сброса звонка, для завершения принятого вызова. (Если вы не будете использовать всплывающие окна).