> ## Documentation Index
> Fetch the complete documentation index at: https://api.infer.so/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup on websites

**Web Call Package**

Web Call Package

The `web-call` package is a JavaScript library that provides functionalities to make web-based voice calls. It is designed for easy integration and use in web applications.

## Steps to Set Up Web Call Package on Websites

1. ### Create a New Agent for Web Calls

   To use an agent on your website, you need to create a new agent with the `webcall` capability. You can create a new agent using this [/api/agent/create\_new\_agent](https://api.infer.so/api-reference/voice-agent/create-voice-agent.md) endpoint.
   Ensure you include `web_config` in `telephony_providers` to enable web call capabilities.

   ```json
   {
     // ... other agent properties
     "telephony_providers": {
       "web_config": {
         "site_domain": "example.com"
       }
     }
     // ... other agent properties
   }
   ```

2. ### Import the Web Call Package

   ```html
   <script defer src="https://infer-webcall.s3.us-east-1.amazonaws.com/bundle.js"></script>
   ```

   You can import the package via our CDN  by adding the following script tag to your HTML file.

   > [!NOTE]
   >
   > Ensure you use the `defer` attribute in the script tag to ensure that the script is executed after the document has been parsed.

3. ### Make a call from the website

   ```javascript
   const instance = new InferBot({
     agentId:
       "<AGENT_ID>",
   });

   // To start the call (User interaction required)
   document.getElementById("start").addEventListener("click", async () => {
     const conversationId = await instance.startConversation();
     instance.status // Check the status of the call
   });

   // To stop the call
   document.getElementById("stop").addEventListener("click", async () => {
     await instance.stopConversation();
   });
   ```

## Additional Features

1. ### Microphone Selection
   You can select a microphone by calling `setMicrophone(<deviceId>)`. You can get the `deviceId` using native browser audio API or via calling `getMicrophones()`.
   ```javascript

   const bot = new InferBot({
     agentId: "<AGENT_ID>",
   })

   // Get all the available audio input devices
   const audioInputDevices = await bot.getMicrophones();
   // returns MediaDeviceInfo[]

   // Select the microphone you want to use (e.g., an option in the UI)
   const selectedMicrophone = audioInputDevices[0];
   await bot.setMicrophone(selectedMicrophone.deviceId);
   ```
   > [!NOTE]
   >
   > Microphone selection is optional. If not specified, the default microphone of the host machine will be used.
2. ### Setting Dynamic values for a call

If there is dynamic data that will change depending on the user's information or other factors, you can set dynamic values for the prompt.
When you create the agent, any dynamic value can be set by placing it in curly braces `{your_variable_name}` in the prompt.

```json
{
  "prompt": "Hello {name}, how can I help you?"
}
```

You can set the dynamic values using the `setPromptValues({name: "Bob"})` method. These values will be substituted in the `initial_text` and `prompt`.

```javascript
  const bot = new InferBot({
    agentId: "<AGENT_ID>",
  })
  bot.setPromptValues({name: "Bob"});
  await bot.startConversation();
```

> [!NOTE]
>
> Call the `setPromptValues` method before starting the conversation; otherwise, the values will not be substituted.

3. ### Transfer web call to a phone call

You can transfer an ongoing web call to a phone call by enabling the `transfer_calls` action under the `actions` configuration. This allows the system to route calls from the web to a specified phone number.
To enable the `transfer_calls` action, you need to call the [/api/agent/update-voice-agent](https://api.infer.so/api-reference/voice-agent/update-voice-agent.md) endpoint with the following payload:

```json
{
  "actions": {
    "transfer_calls": {
      "number_dict": {
        "default": "<PHONE_NUMBER>",
        "legal": "<PHONE_NUMBER>"
      },
      "user_message": "Transferring the call. Please wait."
    }
  }
}
```

Explanation of Fields

* `number_dict`: A JSON object which will contain key pair of name and a phone number. If the user asks to transfer the call to bob then the key `legal` will be the phone number to which the call will be transferred. This is helpful in scenarios where you want to transfer the call to different departments based on the user's request. If user doesn't mention any department then the call will be transferred to the number mentioned in the `default` key.
* `user_message`: A message bot will respond with before transferring call. \[OPTIONAL]


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