EventListener on participant or chat click

Description
Hi, this may be a basic question but I’m integrating zoom into our website and have created an overlay when a button is clicked that sits on on top of the video, using mainly z-index. However, when this is active I can’t get the chat window to the front again. I think my preferred solution would be when the user clicks the participant or chat buttons in the footer it resizes my overlay accordingly, then there would be no reason to bring the chat to front. Is this even possible? If so what would be the best method to implement this? If there also a function to launch the chat window as soon as a participant joins? Appreciate any help.

Which Web Client SDK version?
1.9.1


Device (please complete the following information):
Any browser - using chrome

Hi @chris.w,

Welcome to the community!

The best thing to do would probably be to listen for width changes on the window, and also clicks on certain buttons. The below should be a copy-and-paste solution for you. Just need to update the class name to match that of your overlay.

//Update the overlay's width when the window is resized.
$(window).on('resize', function() {
  updateCustomOverlayWidth();
});

//Update the overlay's width when a toolbar button or a close/popout button is clicked.
$('.footer-button__button, .dropdown-menu li a').on('click', function() {
  updateCustomOverlayWidth();
});

//Update the custom overlay's width.
function updateCustomOverlayWidth() {
  let w = $('.wc-container-left').width;
  $('.overlay-class').width(w);
}

There are no built-in methods to launch the chat window as soon as a participant joins, but you could add the following to your join callback or event, so that it automatically opens when the attendee joins.

$('.footer-button__chat-icon').closest('button').trigger('click');

Thanks,
Alex

P.S. The Zoom SDK is updated regularly, so the above snippets may not work with future releases of the Zoom Web SDK. These scripts were tested with v1.9.1.

2 Likes

Thanks so much - marked it as solution. Really appreciate it.

1 Like

Glad @alexmayo could help, @chris.w :slight_smile:

1 Like