> Fetch clean Markdown by appending `.md` to any page URL under https://signalwire.com/docs or requesting it with the HTTP header `Accept: text/markdown`. The root index at https://signalwire.com/docs/llms.txt lists the available documentation indexes.

# The SignalWire Client

The SignalWire Client provides access to SignalWire's services on the browser. It provides methods to handle incoming calls, dial to addresses, and register devices for notifications.

## Instantiation \[#instantiation]

The SignalWire client is instantiated using the `SignalWire` function.

If you're including the `@signalwire/js` dependency as a script in HTML, the `SignalWire` function is a property of the `SignalWire` global variable that the script sets:

```html
<script type="text/javascript" src="https://cdn.signalwire.com/@signalwire/js"></script>
<script>
  async function main() {
    const client = await SignalWire.SignalWire({
      token: "<TOKEN>",
    });
  }
</script>
```

If you installed `@signalwire/js` from npm:

```javascript
import { SignalWire } from "@signalwire/js";

async function main() {
  const client = await SignalWire({
    token: "<TOKEN>",
  });
}
```

For React or React Native projects, use the community library:

```jsx
import { useSignalWire } from "@signalwire-community/react";

export default function App() {
  const client = useSignalWire({
    token: "<TOKEN>",
  });
}
```

### Parameters

**`token`** `string` — required

The [access token](/docs/browser-sdk/v3/js/reference/signalwire#authentication) for the [subscriber](/docs/platform/subscribers).

---

**`rootElement`** `HTMLElement`

The HTML container element where the SDK will display the video stream.

---

**`incomingCallHandlers`** `IncomingCallHandlers`

Callback functions for when a call is received. See [IncomingCallHandlers](#incomingcallhandlers).

---

**`userVariables`** `Record<string, any toc={true}>`

Arbitrary variables that are transparent to FreeSWITCH.

---

> **Tip**
>
> You can manage the DOM yourself by not specifying a `rootElement` here and using the [`buildVideoElement`](/docs/browser-sdk/v3/js/reference/signalwire/utils#buildvideoelement) function instead.

### Example

#### Vanilla JS

```html
<html>
  <body>
    <script type="text/javascript" src="https://cdn.signalwire.com/@signalwire/js"></script>

    <script>
      async function main() {
        const client = await SignalWire.SignalWire({
          token: "<TOKEN>",
        });

        const conversations = await client.conversation.getConversations();
        console.log(conversations);

        const addresses = await client.address.getAddresses();
        console.log(addresses);
      }
      main();
    </script>
  </body>
</html>
```

#### React (community)

```jsx
import { useSignalWire } from "@signalwire-community/react";

// If you were using React Native, you'd import the same hook from
// the package `@signalwire-community/react-native`. Like so:
// import { useSignalWire } from "@signalwire-community/react-native";
import { useEffect } from "react";

export default function App() {
  const client = useSignalWire({
    token: "<TOKEN>",
  });

  useEffect(() => {
    if (!client) return; // client is not initialized yet

    async function log() {
      const conversations = await client.conversation.getConversations();
      console.log(conversations);

      const addresses = await client.address.getAddresses();
      console.log(addresses);
    }
    log(); //useEffect doesn't directly support async effects; thus a subfunction
  }, [client]);

  return <></>;
}
```

## Properties

**`httpHost`** `string`

Returns the URL of the host that the client will use to make HTTP requests (like querying the list of addresses or conversations). *Read-only.*

```javascript
console.log(client.httpHost());
// fabric.signalwire.com
```

---

## Methods

#### [dial](/docs/browser-sdk/v3/js/reference/signalwire/client/dial)

Dial to an address

#### [online](/docs/browser-sdk/v3/js/reference/signalwire/client/online)

Go online to receive call invites

#### [offline](/docs/browser-sdk/v3/js/reference/signalwire/client/offline)

Go offline to stop receiving call invites

#### [getSubscriberInfo](/docs/browser-sdk/v3/js/reference/signalwire/client/get-subscriber-info)

Get info about the current subscriber

#### [connect](/docs/browser-sdk/v3/js/reference/signalwire/client/connect)

Connect the WebSocket client

#### [disconnect](/docs/browser-sdk/v3/js/reference/signalwire/client/disconnect)

Disconnect the WebSocket client

#### [updateToken](/docs/browser-sdk/v3/js/reference/signalwire/client/update-token)

Update the auth token

## Namespaces

Certain methods and properties are organized into namespaces for clarity. They can be accessed as follows:

```js
client.address.getAddresses();
client.chat.getMessages();
client.conversation.getConversations();
```

#### [Address](/docs/browser-sdk/v3/js/reference/signalwire/client/address)

Methods for working with addresses

#### [Chat](/docs/browser-sdk/v3/js/reference/signalwire/client/chat)

Methods for chat functionality

#### [Conversation](/docs/browser-sdk/v3/js/reference/signalwire/client/conversation)

Methods for conversations

## Type aliases

### IncomingCallHandlers \[#incomingcallhandlers]

Use this object to assign callback functions which get invoked when a call is received.

| Name        | Type                                 | Required? | Description                                                   |
| :---------- | :----------------------------------- | :-------- | :------------------------------------------------------------ |
| `all`       | `(IncomingCallNotification) => void` | Optional  | Since push support has been removed, identical to `websocket` |
| `websocket` | `(IncomingCallNotification) => void` | Optional  | Callback for calls received via websocket (overrides `all`)   |

---

### IncomingCallNotification \[#incomingcallnotification]

The object passed into the [IncomingCallHandlers](#incomingcallhandlers) callback with the call description and controls.

| Name             | Type                                              | Description                                      |
| :--------------- | :------------------------------------------------ | :----------------------------------------------- |
| `invite`         | `object`                                          | -                                                |
| `invite.details` | [IncomingInvite](#incominginvite)                 | The details of the invite.                       |
| `invite.accept`  | `(CallOptions) => Promise<CallFabricRoomSession>` | Invoke this function to accept the incoming call |
| `invite.reject`  | `() => Promise<void>`                             | Invoke this function to reject the incoming call |

---

### IncomingInvite \[#incominginvite]

| Name                | Type          | Description                               |
| :------------------ | :------------ | :---------------------------------------- |
| `source`            | `"websocket"` |                                           |
| `callID`            | `string`      | Unique ID of the incoming call            |
| `sdp`               | `string`      | *Deprecated*                              |
| `caller_id_name`    | `string`      | Name of the caller                        |
| `caller_id_number`  | `string`      | ID or number of the caller                |
| `callee_id_name`    | `string`      | Name of the callee                        |
| `callee_id_number`  | `string`      | ID or number of the callee                |
| `display_direction` | `string`      | Direction of the call                     |
| `nodeId`            | `string`      | The node from where the call was received |

---

### CallOptions \[#calloptions]

| Name                   | Type                               | Required? | Description                                                                                          |
| :--------------------- | :--------------------------------- | :-------- | :--------------------------------------------------------------------------------------------------- |
| `rootElement`          | `HTMLElement`                      | Optional  | The HTML container element where the SDK will display the video stream.                              |
| `audio`                | `boolean \| MediaTrackConstraints` | Optional  | Media track constraints for audio. Passing `true` uses browser defaults, and `false` disables audio. |
| `video`                | `boolean \| MediaTrackConstraints` | Optional  | Media track constraints for video. Passing `true` uses browser defaults, and `false` disables video. |
| `disableUdpIceServers` | `boolean`                          | Optional  | Disables the ICE UDP transport policy.                                                               |
| `userVariables`        | `Record<string, any>`              | Optional  | Arbitrary variables that are transparent to FreeSWITCH.                                              |

---

### MediaStreamConstraints \[#mediastreamconstraints]

| Name               | Type                               | Required? | Description                                                                                          |
| :----------------- | :--------------------------------- | :-------- | :--------------------------------------------------------------------------------------------------- |
| `audio`            | `boolean \| MediaTrackConstraints` | Optional  | Media track constraints for audio. Passing `true` uses browser defaults, and `false` disables audio. |
| `video`            | `boolean \| MediaTrackConstraints` | Optional  | Media track constraints for video. Passing `true` uses browser defaults, and `false` disables video. |
| `peerIdentity`     | `string`                           | Optional  | Peer identity.                                                                                       |
| `preferCurrentTab` | `boolean`                          | Optional  | Whether to prefer current tab for the call.                                                          |

---

### CallFabricRoomSession \[#callfabricroomsession]

Extends [`RoomSession`](/docs/browser-sdk/v3/js/reference/video/room-session).

| Name     | Type                               | Description                                                                                     |
| :------- | :--------------------------------- | :---------------------------------------------------------------------------------------------- |
| `start`  | `() => void`                       | Starts the call.                                                                                |
| `answer` | `boolean \| MediaTrackConstraints` | Answers the call (only works if the `CallFabricRoomSession` was a result of an incoming call).  |
| `hangup` | `(id?) => void`                    | Ends the ongoing call by default. If the id of an `RTCPeer` is passed, hangs up that `RTCPeer`. |

## Docs

- [Address Namespace](https://signalwire.com/docs/browser-sdk/v3/js/reference/signalwire/client/address.md)
- [Chat Namespace](https://signalwire.com/docs/browser-sdk/v3/js/reference/signalwire/client/chat.md)
- [Conversation Namespace](https://signalwire.com/docs/browser-sdk/v3/js/reference/signalwire/client/conversation.md)
- [connect](https://signalwire.com/docs/browser-sdk/v3/js/reference/signalwire/client/connect.md): connect method for the SignalWire Client.
- [dial](https://signalwire.com/docs/browser-sdk/v3/js/reference/signalwire/client/dial.md): dial method for the SignalWire Client.
- [disconnect](https://signalwire.com/docs/browser-sdk/v3/js/reference/signalwire/client/disconnect.md): disconnect method for the SignalWire Client.
- [getSubscriberInfo](https://signalwire.com/docs/browser-sdk/v3/js/reference/signalwire/client/get-subscriber-info.md): getSubscriberInfo method for the SignalWire Client.
- [offline](https://signalwire.com/docs/browser-sdk/v3/js/reference/signalwire/client/offline.md): offline method for the SignalWire Client.
- [online](https://signalwire.com/docs/browser-sdk/v3/js/reference/signalwire/client/online.md): online method for the SignalWire Client.
- [updateToken](https://signalwire.com/docs/browser-sdk/v3/js/reference/signalwire/client/update-token.md): updateToken method for the SignalWire Client.