# Set up WebRTC Click-to-Call

WebRTC click-to-call lets visitors ring your company straight from their browser, with no dialer or app to install. WebRTC (Web Real-Time Communication) is the technology built into modern browsers that carries voice and video without any plugin. You set it up in two moves: create a WebRTC trunk (the connection that carries these browser calls into your phone system) to obtain a call link, then place that link behind a button or embed it in a page. This guide walks through building the trunk, routing its inbound calls to the right destination, testing the flow, and adding the link to your site.

## Before you begin

- Video calling is available only on the **Ultimate Plan**. Voice-only click-to-call works on any plan.
- Cloud Voice must be running version **84.11.0.22** or later.
- You need permission to add trunks. Building a WebRTC trunk starts with the **Add** button under **Extension and Trunk > Trunk**.

:::note
If the **Add** button on **Extension and Trunk > Trunk** is greyed out, your account cannot add trunks. Contact your service provider to have the permission enabled.
:::

## Step 1: Create the WebRTC trunk

The trunk is what generates the call link your visitors will use.

1. Sign in to the PBX (Private Branch Exchange, the phone system that connects your extensions and outside lines) web portal and go to **Extension and Trunk > Trunk**, then click **Add**.
2. Under **Basic**, fill in these fields:
   - **Name**: A label that makes the trunk easy to recognize later.
   - **Trunk Status**: Set to **Enabled**.
   - **Select ITSP Template**: Choose **General**. ITSP stands for Internet Telephony Service Provider; the template pre-loads common trunk settings, and **General** is the correct choice for a WebRTC trunk.

   ![WebRTC trunk basic settings with name, status, and template fields](/images/pbx/webrtc-trunk-basic.png)

3. Under **Detailed Configuration**, set:
   - **Trunk Type**: Select **WebRTC Trunk**.
   - **Username**: Enter a username for the trunk.

   ![WebRTC trunk detailed configuration showing trunk type and username](/images/pbx/webrtc-trunk-detail.png)

4. (Optional) Open the **Advanced** tab to fine-tune the trunk:
   - Under **Codec Settings**, pick the codecs you want to use.
   - Under **Call Restriction**, cap the number of simultaneous calls the trunk will carry.

   :::note
   The concurrent-call limit sets how many WebRTC calls the trunk can carry at the same time. It defaults to **5** and can be raised to a maximum of **10**. Once the trunk reaches its limit, further click-to-call attempts are turned away until a call ends, so size it for your busiest expected traffic.
   :::

5. Click **Save**, then **Apply**.

Once saved, the trunk appears in the list with a green status indicator, and its **WebRTC Inbound Call Link** is generated in the trunk's detail view.

![Cloud Voice, trunk detail view with the generated WebRTC inbound call link](/images/pbx/webrtc-link-cloud.png)

## Step 2: Route the WebRTC inbound calls

Add an inbound route so calls that arrive through the WebRTC trunk land where you want them.

1. Go to **Call Control > Inbound Route** and click **Add**.
2. Under **General**, give the route a name.

   ![Inbound route general settings with a name field](/images/pbx/webrtc-inbound-route.png)

3. Under **Trunk**, move the WebRTC trunk from the **Available** box to the **Selected** box.

   :::caution
   An inbound route cannot mix trunk types. If you select the WebRTC trunk, you cannot also add a trunk of any other type to the same route.
   :::

4. Under **Default Destination**, decide where the calls go:
   - **Same destination every time**: Pick it from the **Default Destination** drop-down list.

     ![Default destination drop-down for WebRTC inbound calls](/images/pbx/webrtc-call-dest.png)

   - **Different destinations by time of day**:
   1. Select the **Time Condition** checkbox.
   2. Choose a mode from the **Time-based Routing Mode** drop-down list.
   3. Set a destination for each time period.

     For examples of time-based routing, see [Route inbound calls based on Business Hours](/pbx/administrator-guide/route-inbound-calls-based-on-global-business-hours/), [Route inbound calls based on Department Hours](/pbx/administrator-guide/route-inbound-calls-based-on-department-hours/), and [Route inbound calls based on Employee Hours](/pbx/administrator-guide/route-inbound-calls-based-on-employee-hours/).

5. Click **Save**, then **Apply**.

## Step 3: Test the click-to-call flow

Confirm that a call through the link reaches the destination you configured.

1. Go to **Extension and Trunk > Trunk** and click the edit icon next to the WebRTC trunk.
2. Under **Detailed Configuration**, copy the **WebRTC Inbound Call Link**.

   
   ![Cloud Voice, WebRTC inbound call link ready to copy](/images/pbx/webrtc-link-cloud.png)

3. Paste the link into a new browser tab's address bar and press **Enter**.

A dialpad opens in the browser and a call is placed to the destination you set.

:::tip
While on the call, click the video icon in the lower-left corner of the page to switch to a video call.
:::

![Browser dialpad placing a WebRTC call to the configured destination](/images/pbx/webrtc-call.png)

## Add the link to your website

With the call link working, embed it in your site one of two ways.

**Option 1, Link a button you build.** Create your own call button and point its link to the WebRTC inbound call link.

![Cloud Voice, WebRTC inbound call link used as a custom button target](/images/pbx/webrtc-link-call-link-cloud.png)

**Option 2, Use the built-in button template.** The WebRTC trunk also provides a ready-made call button. Reference its embed link with a script tag:

```html
<script src="{Default Call Template Embed Link}"></script>
```

:::note
Find the **Default Call Template Embed Link** in the trunk's **Detailed Configuration** view, in the same place as the **WebRTC Inbound Call Link**. Copy it into the `src` attribute above.
:::

![Cloud Voice, default call template embed link in the trunk detail view](/images/pbx/webrtc-link-template-link-cloud.png)

The result is a call button that opens the dialer when a visitor clicks it:

![Cloud Voice, default call button on a page and the click-to-call dialer it opens](/images/pbx/default-call-button-effect-cloud.png)
