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

After sending a call invitation, a caller or callee will see different calling pages, which can be customized as needed.

# Customize the UI for call invitation

- - -

## Introduction


After sending a call invitation, a caller or callee will see different calling pages, which can be customized as needed.

This waiting page will show after you send a call invitation, which can be customized.

<Frame width="512" height="auto" caption="">
  <img src="https://storage.zego.im/sdk-doc/Pics/Prebuilt_Web/waitingPage.png" />
</Frame>

This pop-up will show when you receive a call invitation, which can also be customized as needed.

<Frame width="512" height="auto" caption="">
  <img src="https://storage.zego.im/sdk-doc/Pics/Prebuilt_Web/calledDialog.png" />
</Frame>

## How do I customize the waiting page?

You can display a custom waiting page by defining a `div` tag. Call the `setCallInvitationConfig` method provided by the SDK and set `enableCustomCallInvitationWaitingPage` to `true` to enable the ability to use a custom waiting page. Then, listen for the `onWaitingPageWhenSending` event to retrieve the relevant callee information and populate it into your custom waiting page.

<Accordion title="Complete example code" defaultOpen="false">
```html {12-18,37-56}
<html>
    <head>
        <style>
        #root {
            width: 100vw;
            height: 100vh;
        }
    </style>
    </head>
    <body>
        <div id="root">
            
            <div id="waitingPage" style="display: none">
                
                <div id="calleesBox"></div>
                
                <button id="cancelButton">Cancel</button>
            </div>
            
            <button onclick="invite()">invite</button>
            
        </div>
    </body>
    <script src="https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js"></script>
    <script src="https://unpkg.com/zego-zim-web@2.9.0/index.js"></script>
    <script>
        // Set the following parameters to the actual valid values in your business and generate TOKEN
        const userID = "";
        const userName = "";
        const appID = 0;
        const serverSecret = "";
        const TOKEN = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, null, userID, userName);

        const zp = ZegoUIKitPrebuilt.create(TOKEN);
        zp.addPlugins({ ZIM });
        zp.setCallInvitationConfig({
            enableCustomCallInvitationWaitingPage: true,
            onWaitingPageWhenSending: (callType, callees, cancel) => {
                // Add your custom logic here.
                // waitingPageDom is used to display the waiting page when sending a call invitation.
                const waitingPageDom = document.querySelector('#waitingPage');
                waitingPageDom.style.display = 'block';
                // Generate corresponding callee UI based on the callee parameter returned by the callback
                // calleesBoxDom is the parent container used to display callee UI on the page
                const calleesBoxDom = document.querySelector('#calleesBox');
                for (var i = 0; i < callees.length; i++) {
                    const div = document.createElement('div');
                    div.id = callees[i].userID;
                    div.innerHTML = callees[i].userName;
                    calleesBoxDom.appendChild(div);
                }
                // cancelButtonDOM is a button on the waiting page that is used to cancel the call invitation. Here, it is bound to a method that cancels the invitation.
                const cancelButtonDOM = document.querySelector('#cancelButton');
                cancelButtonDOM.onclick = () => {
                    cancel();
                }
            },
            onSetRoomConfigBeforeJoining: (callType) => {
                // The callback for set room config before joining the room, at which point you can hide the waiting page before joining the room.
                const waitingPageDom = document.querySelector('#waitingPage');
                waitingPageDom.style.display = 'none';
            },
            onCallInvitationEnded: (reason) => {
                // You will need to hide your custom waiting page when your call invitation is not connected successfully.
                const waitingPageDom = document.querySelector('#waitingPage');
                waitingPageDom.style.display = 'none';
            }
            // Other settings...
        })

        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);
            });
        }
    </script>

</html>
```
</Accordion>

## How do I customize the call invitation dialog?

You can display a custom call invitation dialog by defining a `div` tag. Use the `setCallInvitationConfig` method provided by the SDK to set `enableCustomCallInvitationDialog` to `true` to enable the ability to customize the call invitation dialog. Then, listen for the `onConfirmDialogWhenReceiving` event to retrieve the caller information and populate it into your custom call invitation dialog.

<Accordion title="Complete example code" defaultOpen="false">
```html {12-20,37-58}
<html>
    <head>
        <style>
        #root {
            width: 100vw;
            height: 100vh;
        }
    </style>
    </head>
    <body>
        <div id="root">
            
            <div id="confirmDialog" style="display: none">
              
              <div id="caller"></div>
              
              <button id="acceptButton">Accept</button>
              
              <button id="refuseButton">Refuse</button>
            </div>
            
        </div>
    </body>
    <script src="https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js"></script>
    <script src="https://unpkg.com/zego-zim-web@2.9.0/index.js"></script>
    <script>
        // Set the following parameters to the actual valid values in your business and generate TOKEN
        const userID = "";
        const userName = "";
        const appID = 0;
        const serverSecret = "";
        const TOKEN = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, null, userID, userName);

        const zp = ZegoUIKitPrebuilt.create(TOKEN);
        zp.addPlugins({ ZIM });
        zp.setCallInvitationConfig({
            enableCustomCallInvitationDialog: true,
            // The following is a callback triggered when receiving a call invitation. This callback returns [accept] and [refuse] which can be used to accept or refuse the call invitation on a custom page.
            onConfirmDialogWhenReceiving: (callType,caller,refuse,accept,data) =>{
                // Add your custom logic here.
                // Here is an example, confirmDialogDom is the DOM object representing the dialog element, which in this case represents your custom call invitation dialog.
                const confirmDialogDom = document.querySelector('#confirmDialog');
                confirmDialogDom.style.display = 'block';
                // Generate caller info UI based on the caller parameter returned by the callback
                const callerDom = document.querySelector('#caller');
                callerDom.innerHTML = caller.userName;
                // Bind methods for reject and accept.
                const refuseButtonDOM = document.querySelector('#refuseButton');
                refuseButtonDOM.onclick = () => { 
                    refuse();          
                    confirmDialogDom.style.display = 'none';
                }
                const acceptButtonDOM = document.querySelector('#acceptButton');
                acceptButtonDOM.onclick = () => { 
                    accept();          
                    confirmDialogDom.style.display = 'none';
                }
            },
            onCallInvitationEnded:(reason)=> {
                // When a call invitation times out or is canceled, the custom call invitation dialog needs to be hidden.
                const confirmDialogDom = document.querySelector('#confirmDialog');
                confirmDialogDom.style.display = 'none';
            }
            // Other settings...
        })
    </script>

</html>
```
</Accordion>

## Reference
<Accordion title="onWaitingPageWhenSending" defaultOpen="false">

- **Description**

  Callback for the call invitation waiting page.

- **Function prototype**

  ```typescript
  onWaitingPageWhenSending?: (
      callType: ZegoInvitationType,
      callees: ZegoUser[],
      cancel: CancelCallInvitationFunc
  ) => void;
  ```

- **Parameter Description**

  <table>
    <colgroup>
      <col width="20%" />
      <col width="" />
      <col width="15%" />
    </colgroup>
  <tbody><tr data-row-level="1">
  <th>Parameter</th>
  <th>Category</th>
  <th>Description</th>
  </tr>
  <tr data-row-level="2">
  <td>callType</td>
  <td>ZegoInvitationType</td>
  <td>The type of call. </td>
  </tr>
  <tr data-row-level="3">
  <td>callees</td>
  <td>ZegoUser[]</td>
  <td>The callee list, including no more than 9 users.</td>
  </tr>
  <tr data-row-level="4">
  <td>cancel</td>
  <td>CancelCallInvitationFunc = (data?: string) => void</td>
  <td>The function to cancel invitation.</td>
  </tr>
  </tbody></table>
</Accordion>

<Accordion title="onSetRoomConfigBeforeJoining" defaultOpen="false">

- **Description**

  The callback of setting a room before joining.

- **Function Prototype**

  ```typescript
  onSetRoomConfigBeforeJoining?: (
      callType: ZegoInvitationType
  ) => ZegoCloudRoomConfig;
  ```

- **参数说明：**

  <table>
    <colgroup>
      <col width="20%" />
      <col width="" />
      <col width="15%" />
    </colgroup>
  <tbody><tr data-row-level="1">
  <th>Parameter</th>
  <th>Category</th>
  <th>Description</th>
  </tr>
  <tr data-row-level="2">
  <td>callType</td>
  <td>ZegoInvitationType</td>
  <td>The type of call.</td>
  </tr>
  </tbody></table>

- **Return Value**

  <table>
    <colgroup>
      <col width="20%" />
      <col width="" />
    </colgroup>
  <tbody><tr data-row-level="1">
  <th>Return Value</th>
  <th>Description</th>
  </tr>
  <tr data-row-level="2">
  <td>ZegoCloudRoomConfig</td>
  <td>Room Configuration.</td>
  </tr>
  </tbody></table>
</Accordion>

<Accordion title="onCallInvitationEnded" defaultOpen="false">

- **Description**

  The callback for the call invitation termination.

- **Function prototype**

  ```typescript
  onCallInvitationEnded?: (
      reason: CallInvitationEndReason, 
      data: string
  ) => void;
  ```

- **Parameter Description**

  <table>
    <colgroup>
      <col width="20%" />
      <col width="" />
      <col width="15%" />
    </colgroup>
  <tbody><tr data-row-level="1">
  <th>Parameter</th>
  <th>Category</th>
  <th>Description</th>
  </tr>
  <tr data-row-level="2">
  <td>reason</td>
  <td>CallInvitationEndReason</td>
  <td>Reasons for ending a call invitation.</td>
  </tr>
  <tr data-row-level="3">
  <td>data</td>
  <td>string</td>
  <td>Extra data.</td>
  </tr>
  </tbody></table>

</Accordion>

<Accordion title="ZegoInvitationType" defaultOpen="false">

- Description: Enum class for call invitation type.
- Enum Description:

  <table>
    <colgroup>
      <col width="20%" />
      <col />
    </colgroup>
  <tbody><tr>
    <th>Enumeration</th>
    <th>Enum Value</th>
    <th>Description</th>
  </tr>
  <tr>
  <td>VoiceCall</td>
  <td>0</td>
  <td>Voice Call.</td>
  </tr>
  <tr>
  <td>VideoCall</td>
  <td>1</td>
  <td>Video Call.</td>
  </tr>
  </tbody></table>

</Accordion>

<Accordion title="ZegoUser" defaultOpen="false">

- Type Description: User Information Class.
- Parameter Description:
  <table>
    <colgroup>
      <col width="20%" / >
      <col />
      <col width="15%" />
      <col />
    </colgroup>
  <tbody><tr data-row-level="1">
  <th>Attributes/Methods</th>
  <th>Type</th>
  <th>Required</th>
  <th>Description</th>
  </tr>
  <tr data-row-level="2">
  <td>userID</td>
  <td>string</td>
  <td>Required</td>
  <td>User's unique identifier, defined by the developer, with a maximum length of 32 bytes. It only supports numbers, English characters, and '!', '#', '$', '&', '(', ')', '+', '-', ':', ';', '&lt', '=', '.', '>', '?', '@', '[', ']', '^', '_', '{', '}', '|', '~'.</td>
  </tr>
  <tr data-row-level="3">
  <td>userName</td>
  <td>string</td>
  <td>Optional</td>
  <td>User's name. It has a maximum length of 256 bytes.</td>
  </tr>
  <tr data-row-level="4">
  <td>setUserAvatar</td>
  <td>(avatar: string) =&gt; void</td>
  <td>Optional</td>
  <td>Method to set the user's avatar by passing in the image resource address.</td>
  </tr>
  </tbody></table>

</Accordion>

<Accordion title="CallInvitationEndReason" defaultOpen="false">

- Type Description: Enum class for call ending reasons.
- Enum Descriptions:

  <table>
    <colgroup>
      <col width="20%" />
      <col />
    </colgroup>
  <tbody>
      <tr>
        <th>Enumeration</th>
        <th>Value</th>
        <th>Description</th>
      </tr>
      <tr>
          <td>Declined</td>
          <td>Declined</td>
          <td>Decline the invitation.</td>
      </tr>
      <tr>
          <td>Timeout</td>
          <td>Timeout</td>
          <td>The Call invitation timed out.</td>
      </tr>
      <tr>
          <td>Canceled</td>
          <td>Canceled</td>
          <td>The call invitation is cancelled</td>
      </tr>
      <tr>
          <td>Busy</td>
          <td>Busy</td>
          <td>The callee is busy。</td>
      </tr>
      <tr>
          <td>LeaveRoom</td>
          <td>LeaveRoom</td>
          <td>The caller has left the room.</td>
      </tr>
  </tbody>
  </table>
</Accordion>

<Accordion title="onConfirmDialogWhenReceiving" defaultOpen="false">

- **Description**

  The callback for confirmation when receiving a call invitation.

- **Function Prototype**

  ```typescript
  onConfirmDialogWhenReceiving?: (
      callType: ZegoInvitationType,
      caller: ZegoUser,
      refuse: RefuseCallInvitationFunc,
      accept: AcceptCallInvitationFunc,
      data: string
  ) => void;
  ```

- **Parameter Description**

  <table>
    <colgroup>
      <col width="20%" />
      <col width="" />
      <col width="15%" />
    </colgroup>
  <tbody><tr data-row-level="1">
  <th>Parameter</th>
  <th>Type</th>
  <th>Description</th>
  </tr>
  <tr data-row-level="2">
  <td>callType</td>
  <td>ZegoInvitationType</td>
  <td>The type of call.</td>
  </tr>
  <tr data-row-level="3">
  <td>caller</td>
  <td>ZegoUser</td>
  <td>The user information of the caller.</td>
  </tr>
  <tr data-row-level="4">
  <td>refuse</td>
  <td>RefuseCallInvitationFunc = (data?: string) => void</td>
  <td>The function to reject the invitation.</td>
  </tr>
  <tr data-row-level="5">
  <td>accept</td>
  <td>AcceptCallInvitationFunc = (data?: string) => void</td>
  <td>The function to accept the invitation.</td>
  </tr>
  <tr data-row-level="6">
  <td>data</td>
  <td>string</td>
  <td>Extra data.</td>
  </tr>
  </tbody></table>

</Accordion>

Introduction

How do I customize the waiting page?

How do I customize the call invitation dialog?

Reference