How to initialize and authorize the client#

Beta version

The functionality is in beta mode. Features are subject to change and may also work unstably. There may be additional charges for functionality in the future.
You can request access to the functionality via GREEN-API support

The library consists of two parts:

GreenApiVoipClient — a wrapper over the REST methods: dial a number, accept, reject, end a call;
CallsConnection — returned by the connectCalls() method. This is a WebSocket connection: it reports the call state, announces incoming calls and carries audio over WebRTC.

The credentials are passed to the client constructor, the library has no separate login step. The instance itself must already be authorized in the console by QR code — the library handles calls only.

Creating the client and the connection#

Add an entry point for the integration to the JavaScript file main.js (or main.ts if you use TypeScript).

import { GreenApiVoipClient } from '@green-api/whatsapp-api-calls-client-js';

const client = new GreenApiVoipClient({
  idInstance: 'your-id-instance',
  apiTokenInstance: 'your-api-token-instance',
  apiUrl: 'your-api-url', // API URL of your instance, for example https://1234.api.green-api.com
});

// Open the calls connection. It reconnects automatically, and the current call state
// arrives right after connecting and on every change.
const calls = client.connectCalls();

calls.addEventListener('connect', () => console.log('Calls connection established.'));
calls.addEventListener('disconnect', (event) => console.log('Connection lost:', event.detail.reason));
calls.addEventListener('error', (event) => console.error('Calls error:', event.detail.message));

Note: the events are subscribed to on the calls connection, not on the client itself.

Instance parameters#

You need to pass three values:

idInstance
apiTokenInstance
apiUrl

Take them from your GREEN-API console by selecting the required authorized instance.

As apiUrl, specify the API URL of your instance — for example, https://1234.api.green-api.com. This is the same address you use to call the REST methods of the instance.

Example with a web form#

In the vanilla JavaScript example, the same data is entered in a form on the page, and the client is created when the button is clicked.

    <section>
      <p>Initialization</p>
      <input id="apiUrl" placeholder="apiUrl">
      <input id="idInstance" placeholder="instance id">
      <input id="apiTokenInstance" placeholder="instance api token">
      <button id="connectButton">connect</button>
      <button id="disconnectButton" disabled>disconnect</button>
    </section>

    <section style="margin-top: 16px;">
      <p>Outgoing call</p>
      <input id="phoneNumber" placeholder="phone number" disabled>
      <button id="startCallButton" disabled>start call</button>
    </section>

    <section>
      <p>Current call</p>
      <button id="endCallButton" disabled>end call</button>
    </section>

const connectButton = document.getElementById('connectButton');
const disconnectButton = document.getElementById('disconnectButton');
const startCallButton = document.getElementById('startCallButton');
const endCallButton = document.getElementById('endCallButton');
const phoneNumberInput = document.getElementById('phoneNumber');

let client = null;
let calls = null;

connectButton.addEventListener('click', () => {
  client = new GreenApiVoipClient({
    idInstance: document.getElementById('idInstance').value,
    apiTokenInstance: document.getElementById('apiTokenInstance').value,
    apiUrl: document.getElementById('apiUrl').value,
  });

  calls = client.connectCalls();

  calls.addEventListener('connect', () => console.log('Calls connection established.'));
  calls.addEventListener('disconnect', (event) => console.log('Connection lost:', event.detail.reason));
  calls.addEventListener('error', (event) => console.error('Calls error:', event.detail.message));

  phoneNumberInput.disabled = false;
  startCallButton.disabled = false;
  disconnectButton.disabled = false;
  connectButton.disabled = true;
  endCallButton.disabled = false;
});

In this state, the client is ready to make and receive calls.

Closing the connection#

When calls are no longer needed, call calls.close(): the method stops audio transmission and closes the WebSocket.

disconnectButton.addEventListener('click', () => {
  calls.close();
  calls = null;
  client = null;

  phoneNumberInput.disabled = true;
  startCallButton.disabled = true;
  disconnectButton.disabled = true;
  connectButton.disabled = false;
  endCallButton.disabled = true;
});

After that, the objects and variables return to their initial state, and the page stops receiving call events.