Перейти к содержанию

Ванильный JavaScript клиент#

Бета-версия

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

Ванильный JavaScript клиент это пример использования whatsapp-api-calls-client Library for JavaScript для интеграции с мессенджером WhatsApp через API сервиса green-api.com. Чтобы воспользоваться библиотекой, нужно получить регистрационный токен и ID инстанса в личном кабинете. Для тестирования рекомендуем воспользоваться бесплатным тарифом "Разработчик".

Сайт представляет собой пример для разработчиков, направленный на лучшее понимание библиотеки и не является каким-либо полноценным решением, основные события/ошибки отображаются в консоли разработчика в браузере.

1. Скачивание примера#

Для установки примера необходимо скачать код из github репозитория.

Скачайте архив или воспользуйтесь командной строкой:

git clone https://github.com/green-api/whatsapp-api-calls-client-js.git

2. Установка среды для запуска клиента#

В командной строке в загруженном примере перейдите в папку examples, далее в папку basic-usage-vanilla-js. Это нам необходимо чтобы настроить зависимости с помощью npm менеджера пакетов.

cd whatsapp-api-calls-client-js/examples/basic-usage-vanilla-js  
npm install  
npm run dev

npm install достаточно выполнять один раз при первой установке.

После этого вам станет доступен веб-интерфейс клиента по указанному адресу, например:

 npm run dev

> basic-usage@0.0.0 dev
> vite


  VITE v5.2.11  ready in 194 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Откройте ссылку в предпочитаемом браузере.

Для остановки сервера нажмите Ctrl + C и затем нажмите кнопку Y.

3. Заполнение необходимых данные для авторизации#

Пример запущенного приложения в окне браузера.

start

Необходимые данные для авторизации находятся в вашем личном кабинете GREEN-API. В качестве apiUrl используейте строку https://pool.voip.green-api.com, где pool представляет собой первые 4 символа искомого idInstance:

  • apiUrl
  • idInstance
  • apiTokenInstance

Далее необходимо нажать на кнопку connect`` для подключения инстанса иdisconnect``` для отключения.

Дополнительная информация

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

4. Приём входящих звонков#

После авторизации в приложении вы можете начать принимать входящие звонки.

Информация о входящем звонке поступит с помощью всплывающего окна, где вы можете выбрать принять или отклонить звонок.

Браузер может спросить разрешение на использование вашего микрофона, для передачи голоса. Необходимо разрешить это действие.

Для окончания звонка нажмите на кнопку end call. Для вас соединение будет завершено, а клиент услышит в трубку тишину.

При отклонении звонка вызов по-прежнему будет поступать на телефон, что не является ошибкой, а особенностью. Из-за нестабильности технологии voip вы можете не увидеть уведомление о входящем звонке в окне браузера.

5. Выполнение исходящих звонков#

После авторизации в приложении вы можете начать совершать исходящие звонки.

Для этого введите номер абонента в форму Outgoing call и нажмите на кнопку Start call.

Если по какой-то причине звонок не произошёл, убедитесь, что в консоли нет ошибок, подождите 20 секунд и повторите вызов.

На некоторых телефонах необходимо, чтобы WhatsApp был запущен фоновым процессом для приёма входящих звонков.

Для окончания звонка нажмите на кнопку end call. Для вас соединение будет завершено, а клиент услышит в трубку тишину.