Video Call

Voice Call

Live Streaming

In-app Chat

Cloud Communications Products

Call Kit

Live Streaming Kit

Live Audio Room Kit

In-app Chat Kit

Video Conference Kit

ZEGO UIKits

Super Board

AI Effects

Cloud Recording

Mini Game Engine

Admin Console

Supporting Services

Digital Human PaSS

AIGC

Products

UIKit

Overview

Using HTML script

Using NPM package manager

Using WordPress

Quick start

Customize the UI for call invitation

Customize ringtones

Customize call invitation config

Customize event callbacks

Send a call invitation to offline apps

Invite users to an ongoing call

Call invitation

Implement an audio-only session

Set a direct join session

Screen sharing

Limit the number of participants

Invite via a shared link

Set user avatar

Set video resolution

Use the whiteboard

Callback on room joining or leaving

In-room messages

Resume the call

Custom prebuilt features

Authentication and Kit Token

Go to ZEGOCLOUD Admin Console to create a UIKit project.

# Quick start

- - -

<Video src="https://resource.zegocloud.com/prebuilt/call_invitation_pro.mp4"/>


## Prerequisites


- Go to [ZEGOCLOUD Admin Console](https://console.zegocloud.com) to create a UIKit project.
- Get the **AppID** and **ServerSecret** of the project.



## Integrate the SDK

### Import the SDK

Choose either of the following to import the Call Kit:

<Tabs>
  <Tab title="Using the NPM">
    <Steps>
      <Step title="Install the plug-in">
      ```js
      npm i @zegocloud/zego-uikit-prebuilt zego-zim-web@2.16.0 --save 
      ```
      </Step>
      <Step title="Import the Call Kit in your project's js or ts file">
        ```js
        import { ZIM } from "zego-zim-web";
        import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';
        ```
      </Step>
    </Steps>
  </Tab>
  <Tab title="Using the HTML Script Tag">
    Import the following script code in the `HTML` page:
    (**A more  recommended way**: Download and save it on your app server, and import it to the corresponding path.)
    ```html
    <script src="https://unpkg.com/zego-zim-web@2.16.0/index.js"></script>
    <script src="https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js"></script>
    ```
  </Tab>
</Tabs>


### Initialize the Call Kit with call invitation feature

Initialize the Call Kit, and add the call invitation plug-in:
- Generate a [Kit Token](../04-Authentication%20and%20Kit%20Token.mdx)
- Fill in the required parameters in the following code.

```javascript
// Generate a Token by calling a method.
// @param 1: appID
// @param 2: serverSecret
// @param 3: Room ID
// @param 4: User ID
// @param 5: Username
const userID = ""; 
const userName = "userName" + userID;
const appID = 0;
const serverSecret = "";
const TOKEN = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret,null, userID, userName);

const zp = ZegoUIKitPrebuilt.create(TOKEN);
zp.addPlugins({ ZIM });
```


### Set a button-trigger event

Set up a button and add a button-click event for making call invitations.

You can customize the position of the button you set for making call invitations accordingly, passing in the ID of the user you want to call.


```html
  <button onclick="invite()">invite</button>
```

```javascript
function invite() {
   const targetUser = {
        userID:'',
        userName:''
    };
   zp.sendCallInvitation({
    callees: [targetUser],
    callType: ZegoUIKitPrebuilt.InvitationTypeVideoCall,
    timeout: 60, // Timeout duration (second). 60s by default, range from [1-600s].
   }).then((res) => {
    console.warn(res);
   })
   .catch((err) => {
   console.warn(err);
   });
}
```

## Run & Test

So far, you have finished all the steps!

Now you can start up and run the project in a browser using a server you're familiar with.

## Resources

<CardGroup cols={2}>
  <Card title="Realtime Coding" href="https://stackblitz.com/edit/zegocloud-prebuilt-call-invitation?file=index.js">
  Click here to code online and check it in action.
</Card>
<Card title="Live Demo" href="https://zegocloud.github.io/zego_uikit_prebuilt_web/call_invitation">
  Click here to try a live demo.
</Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
    <Card title="Customize the UI for call invitation" href="./02-Customize the UI for call invitation.mdx">
    </Card>
    <Card title="Customize call invitation config"  href="./04-Customize call invitation config.mdx">
    </Card>
    <Card title="Customize ringtones"  href="./03-Customize ringtones.mdx">
    </Card>
    <Card title="Customize event callbacks"  href="./05-Customize event callbacks.mdx">
    </Card>
</CardGroup>

## Reference

<Accordion title="sendCallInvitation" defaultOpen="false">
- **Description**

  Send a call invitation.

- **Function Prototype**

  ```ts
  sendCallInvitation(params: {
      callees: ZegoUser[];
      callType: ZegoInvitationType;
      timeout?: number;
      roomID?: string;      
      data?: string;
      notificationConfig?: ZegoSignalingPluginNotificationConfig;
  }): Promise<{
      errorInvitees: ZegoUser[];
  }>;
  ```

- **Parameter Description**

  | Parameter | Type | Required | Description |
  | :-- | :-- | :-- | :-- | 
  | callees | ZegoUser[] | Yes | List of callee users. A user can invite up to 9 other users at most. |
  | callType | ZegoInvitationType | Yes | Call type. |
  | timeout | number | No | The duration of waiting for the callee response to the invitation, in seconds, with a value range of [1, 600]. The default value is 90. |
  | roomID | string | No | Room ID, generated by you, is a string with a maximum length of 128 bytes. It only supports numbers, English characters, and the following characters: '~', '!', '@', '#', '$', '', '^', '&', '*', '(', ')', '_', '+', '=', '-', ', ';', '’', ',', '.', '&lt;', '&gt;', '/'. |
  | data | string | No | Extension field. |
  | notificationConfig | ZegoSignalingPluginNotificationConfig | No | Offline push configuration. |

</Accordion>

<Accordion title="ZegoUser" defaultOpen="false">
- **Description**

  User information class.

- **Parameter Description**

  | Parameter | Type | Required | Description |
  | :-- | :-- | :-- | :-- |
  | userID | string | Yes | Unique identifier of the user, defined by you, up to 32 bytes long, only supporting numbers, English characters, and '!', '#', '$', '&', '(', ')', '+', '-', ':', ';', '&lt;', '=', '.', '&gt;', '?', '@', '\[', '\]', '^', '_', '\{', '\}', '|', '~'. | 
  | userName | string | No | Name of the user. Up to 256 bytes long. |
  | avatar | string | No | Set the user avatar on the call page. |
  | setUserAvatar | (avatar: string) => void | No | Method to set the user avatar by passing in the image resource address. |
</Accordion>

<Accordion title="ZegoInvitationType" defaultOpen="false">
- **Description**

  Enumeration class of call invitation types.

- **Enumerations**

  | Enum | Value | Description | 
  | :-- | :-- | :-- |
  | VoiceCall | 0 | Voice call. |
  | VideoCall | 1 | Video call. |
</Accordion>

<Accordion title="ZegoSignalingPluginNotificationConfig" defaultOpen="false">
- **Description**

  Offline invitation configuration.

- **Parameter Description**

  | Parameter | Type | Required | Description |
  | :-- | :-- | :-- | :-- | 
  | resourcesID | string | No | An English string that can map multiple vendor advanced push configurations, with a length not exceeding 32 characters, customized by the developer. which must be set to the same value as the Push Resource ID in [ZEGOCLOUD Admin Console](https://console.zegocloud.com). |
  | title | string | No | Push title. |
  | message | string | No | Content of the push. |

</Accordion>