Zoom chat window appear in unexpected location

Meeting SDK Web
1

Description
The zoom chat window does nest in the located div but it comes in a different div and override all css properties.

Which Web Meeting SDK version?
2.5.0

Meeting SDK Code Snippets
The code snippets that are causing the error / issue so we can reproduce.

    const zmClient = ZoomMtgEmbedded.createClient();
    let meetingSDKChatElement = document.getElementById('meetingSDKChatElement')
    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
    await zmClient.init({
        zoomAppRoot: document.getElementById(conf.zoomAppRoot),
        assetPath: conf.assetPath,
        language: 'ja-JP',
        customize: {
            video: {
                viewSizes: {
                    default:{
                        width: vw * 0.9,
                        height: vh * 0.4
                    }
                }
              },
            chat: {
                popper: {
                  anchorElement: meetingSDKChatElement,
                }
            }
        }
    });

The html document

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSDK Component</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <style>
    .container {
      display: flex;
      flex-flow: row wrap;
      align-content: space-evenly;
    }
    </style>

  <style>
      .image {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 1080px;
      width: 100%;
      max-height: 150px;
      } 
  </style>

</head>
<body>
    <script src="/static/myzm.js?nonce={{nonce}}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        document.addEventListener("readystatechange", async () => {
          if (document.readyState == "complete") {
            await myzm.start({
              zoomAppRoot: "ZoomEmbeddedApp",
              assetPath: "/static/zoomlib/av",
              meetingNumber: "{{meetingId}}",
              passCode: "{{passCode}}",
              sdkKey: "{{sdkKey}}",
              signature: "{{signature}}"
            });
          }
        });
    </script>
    <script>    
    // https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists
      function waitForElm(selector) {
          return new Promise(resolve => {
              if (document.querySelector(selector)) {
                  return resolve(document.querySelector(selector));
              }

              const observer = new MutationObserver(mutations => {
                  if (document.querySelector(selector)) {
                      resolve(document.querySelector(selector));
                      observer.disconnect();
                  }
              });

              observer.observe(document.body, {
                  childList: true,
                  subtree: true
              });
          });
      }
      waitForElm('.zmwebsdk-MuiSvgIcon-root').then((elm) => {
          $(".zmwebsdk-MuiSvgIcon-root")[8].closest("button").click();
          $(".zmwebsdk-MuiListItem-button")[0].click()
          window.scrollTo({ top: 0, behavior: 'smooth'});
      });

    </script>
    <div class="container">
      <div class="row">
        <div>
          <a href="https://www.meijiyasuda.co.jp/find/soudanyoyaku/index.html" target="_blank">
            <img src="/static/mv.png", alt="Meiji", class="image">
          </a>
        </div>
      </div>
      <div class="row">
        <div id="ZoomEmbeddedApp", class="col-sm-9"></div>
        <div id="meetingSDKChatElement", class="col-sm-3"></div>
      </div>
      <!-- JavaScript Bundle with Popper -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    </div>
</body>
</html>

Screenshots
This is the div that I specified

Screen Shot 2022-07-22 at 19.20.13
Screen Shot 2022-07-22 at 19.20.131768×1108 175 KB

But the chat window appears here instead

Screen Shot 2022-07-22 at 19.20.28
Screen Shot 2022-07-22 at 19.20.282872×1156 373 KB

Device (please complete the following information):

  • Device: [Macbook Pro]
  • OS: [macOS 12]
  • Browser: [Chrome]
  • Browser Version [Version 103.0.5060.134 (Official Build) (x86_64)]

Additional context
I literally copy and paste the code from

The widgets are out of place as well. Is caused by the new version??

Screen Shot 2022-07-22 at 20.51.38
Screen Shot 2022-07-22 at 20.51.382854×1418 308 KB

2

check the result of “let meetingSDKChatElement = …”, does it finds the correct DOM node?

Jürgen

3

Yes it does. I tested in the console.

4

don’t check this problem in the brower debug console - check it directly in your javascript

for objects maybe even: console.log(JSON.stringify(obj));

if your javascript is executed too early, it may be that the DOM tree is not yet rendered, then javascript will not find DOM node

if all timing errors are excluded, you can of course test very well in the brower debug console

Jürgen

5

Yes I am fully aware of what you are saying. And it does feel like a logical reason of why this would not work. I changed the console.log and it can output the correct div. So this was not the problem.

6

then it seems to be a zoom api error. The big Javascript patch solution ’ mutationobserver’ → move the complete sub DOM tree to the correct position is probably not an adequate solution for this problem.

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.