How Can I Handle the Meeting-End Event in the Zoom Meeting SDK?

[melajun]

I have connected zoom sdk to my project as it is said here: https://developers.zoom.us/docs/meeting-sdk/web/component-view/import-sdk/

All OK, but I would like to be able to handle the call end event. I use actual lib (not deprecated):

javascript

const ZoomMtgEmbedded = await (await import('@zoom/meetingsdk/embedded')).default;
const client = ZoomMtgEmbedded.createClient();
const clientConf = await getAuth(id, role, f_name, l_name);

const meetingSDKElement = document.getElementById('meetingSDKElement');
client.init({
    zoomAppRoot: meetingSDKElement,
    language: 'en-US',
    // leaveUrl: '', // This option was available in the now deprecated library - @zoom/meetingsdk/embedded
    patchJsMedia: true,
    leaveOnPageUnload: true,
    customize: {
        meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
        toolbar: {
            buttons: [
                {
                    text: 'Custom Button',
                    className: 'CustomButton',
                    onClick: () => {
                        console.log('TEST');
                    }
                }
            ]
        }
    }
});

The "leaveUrl" parameter was convenient, you can make a redirect with parameters and perform the necessary logic on the page, now this option is not available, and I have been walking in circles on the zoom forum for several hours and either there is no answer, or the answers do not relate to the current library.

When you end a call, the browser gives an "alert" about it, maybe you can intercept it somehow, or play through other events, if you can't add your own callback. Or is "beforunload" the only way?

Thanks for any help!

[lancetlc]

Hey  @melajun 

The definitive way to handle the meeting end or user leave event in the Zoom Meeting SDK for Web Component View (@zoom/meetingsdk/embedded) is by listening to the connection-change event on the client instance.

This event is triggered when the connection status changes, and you can check for the state value of "Closed" to confirm that the meeting has ended or the user has left.

Here is the exact code you need to implement your custom logic:

Recommended Solution

You should add the event listener immediately after creating the client instance and before calling client.init().

JavaScript

 

import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';

const ZoomMtgEmbedded = await (await import('@zoom/meetingsdk/embedded')).default;
const client = ZoomMtgEmbedded.createClient();

// 1. Listen for the connection-change event
client.on('connection-change', (payload) => {
    // payload.state will be "Closed" when the meeting ends or the user leaves.
    // The previous state will be "Connected" or "Reconnecting".
    if (payload.state === "Closed") {
        console.log("Meeting has ended or user has left.", payload);
        
        // --- YOUR CUSTOM LOGIC HERE ---
        // For example, redirect to a thank-you page:
        // window.location.href = "/meeting-end-page";
    }
});

// The rest of your existing initialization code...
const clientConf = await getAuth(id, role, f_name, l_name);
const meetingSDKElement = document.getElementById('meetingSDKElement');

client.init({
    zoomAppRoot: meetingSDKElement,
    language: 'en-US',
    patchJsMedia: true,
    leaveOnPageUnload: true,
    customize: {
        // ...
    }
});

Explanation of Your Options

1. Use the connection-change Event (Recommended)

   • This is the official event handler provided by the new Component View (ZoomMtgEmbedded.createClient()) to signal the lifecycle end of the meeting.

   • The payload.state === "Closed" condition reliably captures both when a participant clicks the Leave Meeting button and when the host clicks End Meeting for All.

   • Regarding leaveUrl

     • You are correct that leaveUrl is specific to the older Client View (ZoomMtg.init()) and is not available in the newer Component View (ZoomMtgEmbedded.init()). The event listener above replaces its functionality.

     • Regarding beforeunload

       • You can still use window.addEventListener('beforeunload', ...) or window.addEventListener('unload', ...) to capture when the user manually closes the tab or navigates away.

       • However, these browser events can be unreliable for SDK-specific cleanup or logic, and they do not fire when a user clicks the Leave button within the Zoom interface. The connection-change event handles all scenarios within the SDK lifecycle.

         This related video shows another function available in the Zoom Video SDK.

         Leave or End Meeting | Video SDK