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 customize the waiting page by calling the setCallInvitationConfig interface to set the enableCustomCallInvitationWaitingPage parameter and listen for the onWaitingPageWhenSending callback.
JavaScript
HTML
zp.setCallInvitationConfig({
enableCustomCallInvitationWaitingPage: true,
// The following is the callback for showing the waiting page after a call invitation is sent. This callback function returns [cancel] for you to set the corresponding user interface.
onWaitingPageWhenSending: (callType,callees,cancel) =>{
// Add your custom logic here.
// The following shows an example, the waitingPageDom is the DOM object that is used to represent the page element, here the page indicates the waiting page when sending a call invitation.
waitingPageDom.style.display = 'block';
// The method used to set the cancel call invitation operation.
cancelButton.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.
waitingPageDom.style.display = 'none';
},
onCallInvitationEnded:(reason) => {
// You will need to hide your custom waiting page when your call invitation is not connected successfully.
waitingPageDom.style.display = 'none';
}
})
1
<div id="waitingPage" style="display: none">
// Customize your UI
// To display information about the callee, you can obtain the callees parameter through the onWaitingPageWhenSending callback
// To cancel the call, you can call the cancel method of the onWaitingPageWhenSending callback
</div>
1
How do I customize the call invitation dialog?
You can customize the call invitation dialog by setting the enableCustomCallInvitationDialog parameter and listening to the onConfirmDialogWhenReceiving callback through the setCallInvitationConfig interface.
JavaScript
HTML
zp.setCallInvitationConfig({
enableCustomCallInvitationDialog: true,
// The following is the callback for showing the call invitation pop-up dialog when receiving a call invitation, this callback returns [accept] and [refuse] for you to set the corresponding UI.
onConfirmDialogWhenReceiving: (callType,caller,refuse,accept,data) =>{
// Add your custom logic here.
// The following shows an example, the confirmDialogDom is the DOM dialog object that you used to represent the dialog element. here the dialog indicates your custom call invitation dialog.
confirmDialogDom.style.display = 'block';
// The method used to set refuse and accept operations.
refuseButton.onclick = () => {
refuse();
confirmDialogDom.style.display = 'none';
}
acceptButton.onclick = () => {
accept();
confirmDialogDom.style.display = 'none';
}
},
onCallInvitationEnded:(reason)=> {
// You will need to hide your customized call invitation dialog when the call invitation timed out or is canceled.
confirmDialogDom.style.display = 'none';
}
})
1
<div id="confirmDialog" style="display: none">
// Customize your UI
// To display information about the caller, you can access the caller parameter through the onConfirmDialogWhenReceiving callback
// To accept a call, you can call the accept method in the onConfirmDialogWhenReceiving callback
// To reject a call, you can call the refuse method in the onConfirmDialogWhenReceiving callback
</div>
1