> ## Documentation Index
> Fetch the complete documentation index at: https://docs-classic.cognigy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started with Click To Call SDK

> Deploy customized, interactive voice AI Agents in minutes.

By the end of this guide, you will have a working web application that uses the Cognigy Click To Call SDK to establish a SIP-based voice call from the browser. You will install the SDK, verify browser compatibility, configure a client, and make your first call.

The code examples in this guide use TypeScript. If you use plain JavaScript, remove the type annotations.

## Prerequisites

* A modern web browser with WebRTC support. For more information, refer to [Supported Browsers](https://docs-classic.cognigy.com/click-to-call/sdk/supported-browsers.md).
* [Node.js](https://nodejs.org/) version 16 or later to install and build your application. The SDK itself runs only in browsers.
* A web application where you can install npm packages.
  * The web application must be served over HTTPS or from `localhost`. WebSocket and UDP traffic must be allowed for SIP signaling and media transport.
* A Cognigy Flow with a configured Voice Gateway Endpoint.

## Install the SDK

1. Install the SDK in your web application project using npm:

   ```bash theme={null}
   npm install @cognigy/click-to-call-sdk
   ```

2. Verify the installation:

   ```bash theme={null}
   npm list @cognigy/click-to-call-sdk
   ```

## Configure the Client

Import the SDK, verify browser support, and create a client instance:

```typescript theme={null}
import { createWebRTCClient, checkWebRTCSupport } from '@cognigy/click-to-call-sdk';

const support = checkWebRTCSupport();
if (!support.supported) {
  console.error('WebRTC not supported. Missing features:', support.missing);
  throw new Error('Browser does not support WebRTC');
}

const client = await createWebRTCClient({
  endpointUrl: 'https://your-cognigy-environment.com/endpoint-token',
  userId: 'user-123',
});
```

The `endpointUrl` parameter must point to a valid [Cognigy Voice Gateway Endpoint](https://docs-classic.cognigy.com/ai/agents/deploy/endpoint-reference/voice-gateway.md):

1. In the **Configuration** section of the Voice Gateway Endpoint, copy the URL from the **Endpoint URL** field.
2. Replace `wss://` with `https://` and remove `/voiceGateway` from the path. For example, if your Endpoint URL is:

   ```txt wrap theme={null}
   wss://endpoint-trial.cognigy.ai/d17711ad79bc73f9da03865066201d744386d78cf11651a3377ae35085902268/voiceGateway
   ```

   Then your `endpointUrl` will be:

   ```txt wrap theme={null}
   https://endpoint-trial.cognigy.ai/d17711ad79bc73f9da03865066201d744386d78cf11651a3377ae35085902268
   ```

The SDK fetches SIP credentials and server details from this URL automatically.

The `userId` parameter is optional. If you don't provide a `userId`, the SDK generates one.

## Register Event Listeners

Set up event listeners before making any calls:

```typescript theme={null}
// Connection events
client.on('connecting', () => console.log('Connecting to SIP server...'));
client.on('registered', () => console.log('SIP client registered')); // Only for endpoints that require registration
client.on('disconnected', () => console.log('Disconnected from SIP server'));

// Call events
client.on('answered', (session) => console.log('Call answered. Session ID:', session.id));
client.on('ended', (session, endInfo) => console.log('Call ended. Cause:', endInfo.cause));
client.on('failed', (session, endInfo) => console.error('Call failed. Cause:', endInfo.cause));

// Error handling
client.on('error', (error) => console.error('WebRTC SDK error:', error.message));
```

> [!NOTE]
>
> Audio playback is automatic. You don't need to add an `<audio>` element to your HTML. For advanced use cases, such as custom audio processing or visualization, refer to [Custom Audio](https://docs-classic.cognigy.com/click-to-call/sdk/custom-audio.md).

## Start and End a Call

With the client configured and events registered, start a voice call:

```typescript theme={null}
// Connect and start the call in one step
await client.connectAndCall();
```

To end the call and clean up:

```typescript theme={null}
await client.endCall();
await client.disconnect();
```

> [!NOTE]
>
> You can end a call only after the remote party has answered it. Calling `endCall()` while the call is still ringing fails with an error.

> [!TIP]
>
> Instead of calling `endCall()` and `disconnect()` separately, you can call [`client.destroy()`](https://docs-classic.cognigy.com/click-to-call/sdk/api-reference/destroy) to end the call, disconnect, and release all resources in one step.

## Run and Verify

1. Combine the code from the previous sections into a single function and bind it to a button click in your web application. A call must be initiated by a user gesture, for example, a button click, because browsers block audio autoplay without user interaction. Refer to the [Complete Example](#complete-example).
2. Start your application and open it in a [supported browser](https://docs-classic.cognigy.com/click-to-call/sdk/supported-browsers.md).
3. Open the browser developer console.
4. Click the button that triggers the call. You should see the following messages in the console:
   * `Connecting to SIP server...`. The SDK is establishing a connection.
   * `SIP client registered`. Registration succeeded. This message appears only for endpoints that require registration.
   * `Call answered. Session ID: ...`. The call is active and audio should be playing.

If you don't hear audio or the call fails to connect, refer to [Troubleshooting](https://docs-classic.cognigy.com/click-to-call/sdk/troubleshooting.md#call-issues).

## Complete Example

```typescript expandable theme={null}
import { createWebRTCClient, checkWebRTCSupport } from '@cognigy/click-to-call-sdk';

async function main() {
  const support = checkWebRTCSupport();
  if (!support.supported) {
    console.error('WebRTC not supported:', support.missing);
    return;
  }

  const client = await createWebRTCClient({
    endpointUrl: 'https://your-cognigy-environment.com/endpoint-token',
    userId: 'user-123',
  });

  // Connection events
  client.on('connecting', () => console.log('Connecting to SIP server...'));
  client.on('registered', () => console.log('SIP client registered'));
  client.on('disconnected', () => console.log('Disconnected from SIP server'));

  // Call events
  client.on('answered', (session) => console.log('Call answered:', session.id));
  client.on('ended', (session, endInfo) => console.log('Call ended:', endInfo.cause));
  client.on('failed', (session, endInfo) => console.error('Call failed:', endInfo.cause));
  client.on('error', (error) => console.error('Error:', error.message));

  await client.connectAndCall();

  // Clean up when the page unloads.
  // destroy() disconnects the SIP client, ends any active call, and releases all resources.
  window.addEventListener('beforeunload', () => {
    void client.destroy().catch(() => {
    });
  });
}

main();
```

## Next Steps

* [API Reference](https://docs-classic.cognigy.com/click-to-call/sdk/api-reference/overview)
* [Event Reference](https://docs-classic.cognigy.com/click-to-call/sdk/event-reference/overview)
* [Security](https://docs-classic.cognigy.com/click-to-call/sdk/security.md)
* [Troubleshooting](https://docs-classic.cognigy.com/click-to-call/sdk/troubleshooting.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.