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.
This pop-up will show when you receive a call invitation, which can also be customized as needed.
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.
Complete example code
<html>
<head>
<style>
#root {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="root">
<!-- !mark(1:7) -->
<!-- Custom waiting page. -->
<div id="waitingPage" style="display: none">
<!-- Get callee information from the callees callback on onWaitingPageWhenSending and display it in calleesBox -->
<div id="calleesBox"></div>
<!-- Bind the click event of cancelButton to the cancel method returned by the onWaitingPageWhenSending callback to cancel the call -->
<button id="cancelButton">Cancel</button>
</div>
<!-- Click this button to initiate a call invitation -->
<button onclick="invite()">invite</button>
<!-- Other page elements... -->
</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({
<!-- !mark(1:20) -->
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>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.
Complete example code
<html>
<head>
<style>
#root {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="root">
<!-- !mark(1:9) -->
<!-- Custom call invitation dialog -->
<div id="confirmDialog" style="display: none">
<!-- Use the caller information obtained from the onConfirmDialogWhenReceiving callback and display it in the caller tag -->
<div id="caller"></div>
<!-- Bind the click event of the acceptButton to the accept method returned from the onConfirmDialogWhenReceiving callback to accept the call invitation -->
<button id="acceptButton">Accept</button>
<!-- Bind the click event of the refuseButton to the refuse method returned from the onConfirmDialogWhenReceiving callback to refuse the call invitation -->
<button id="refuseButton">Refuse</button>
</div>
<!-- Other page elements... -->
</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({
<!-- !mark(1:22) -->
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>Reference
onWaitingPageWhenSending
-
Description
Callback for the call invitation waiting page.
-
Function prototype
onWaitingPageWhenSending?: ( callType: ZegoInvitationType, callees: ZegoUser[], cancel: CancelCallInvitationFunc ) => void; -
Parameter Description
Parameter Category Description callType ZegoInvitationType The type of call. callees ZegoUser[] The callee list, including no more than 9 users. cancel CancelCallInvitationFunc = (data?: string) => void The function to cancel invitation.
onSetRoomConfigBeforeJoining
-
Description
The callback of setting a room before joining.
-
Function Prototype
onSetRoomConfigBeforeJoining?: ( callType: ZegoInvitationType ) => ZegoCloudRoomConfig; -
参数说明：
Parameter Category Description callType ZegoInvitationType The type of call. -
Return Value
Return Value Description ZegoCloudRoomConfig Room Configuration.
onCallInvitationEnded
-
Description
The callback for the call invitation termination.
-
Function prototype
onCallInvitationEnded?: ( reason: CallInvitationEndReason, data: string ) => void; -
Parameter Description
Parameter Category Description reason CallInvitationEndReason Reasons for ending a call invitation. data string Extra data.
ZegoInvitationType
-
Description: Enum class for call invitation type.
-
Enum Description:
Enumeration Enum Value Description VoiceCall 0 Voice Call. VideoCall 1 Video Call.
ZegoUser
- Type Description: User Information Class.
- Parameter Description:
Attributes/Methods Type Required Description userID string Required User's unique identifier, defined by the developer, with a maximum length of 32 bytes. It only supports numbers, English characters, and '!', '#', '$', '&', '(', ')', '+', '-', ':', ';', '<', '=', '.', '>', '?', '@', '[', ']', '^', '_', ', ', '|', '~'. userName string Optional User's name. It has a maximum length of 256 bytes. setUserAvatar (avatar: string) => void Optional Method to set the user's avatar by passing in the image resource address.
CallInvitationEndReason
-
Type Description: Enum class for call ending reasons.
-
Enum Descriptions:
Enumeration Value Description Declined Declined Decline the invitation. Timeout Timeout The Call invitation timed out. Canceled Canceled The call invitation is cancelled Busy Busy The callee is busy。 LeaveRoom LeaveRoom The caller has left the room.
onConfirmDialogWhenReceiving
-
Description
The callback for confirmation when receiving a call invitation.
-
Function Prototype
onConfirmDialogWhenReceiving?: ( callType: ZegoInvitationType, caller: ZegoUser, refuse: RefuseCallInvitationFunc, accept: AcceptCallInvitationFunc, data: string ) => void; -
Parameter Description
Parameter Type Description callType ZegoInvitationType The type of call. caller ZegoUser The user information of the caller. refuse RefuseCallInvitationFunc = (data?: string) => void The function to reject the invitation. accept AcceptCallInvitationFunc = (data?: string) => void The function to accept the invitation. data string Extra data.