Problem with Positioning on Meeting SDK

When trying to customize the init object I ran into an issue where the “anchorElement” property inside the chat popper is not working.

Which Web Meeting SDK version?

Meeting SDK Code Snippets

  // WebSDK Embedded init
  var rootElement = document.getElementById("ZoomEmbeddedApp");
  var chatElement = document.getElementById("ZoomChat");
  var zmClient = ZoomMtgEmbedded.createClient();

  console.log(chatElement);  //I'm getting the correct node here

      debug: true,
      zoomAppRoot: rootElement,
      webEndpoint: meetingConfig.webEndpoint,
      language: meetingConfig.lang,
      customize: {
        video: {
          defaultViewType: "speaker",
          isResizable: false,
          popper: {
            disableDraggable: true,
            isResizable: false,
          viewSizes: {
            default: {
              width: 1280,
              height: 720,
        chat: {
          popper: {
            disableDraggable: true,
            anchorElement: chatElement,
            placement: "top",
        meetingInfo: [
    .then((e) => {
      console.log("FIRST PROMISE");
      console.log("success", e);
    .catch((e) => {
      console.log("error", e);


As you can see I’m getting the chat dialog outside the div that I specified, why?

Troubleshooting Routes
I downloaded code from “github .com/zoom” (to be more specific I cloned the meetingsdk-web-sample repo)

Device (please complete the following information):

  • Device: Lenovo Legion
  • OS: pop OS
  • Browser: Chrome
  • Browser Version: 117.0.5938.62

Additional context
I took the customize options example from:

Any help is appreciated guys, thanks!

Hi @rafael.garcia
thanks for reaching out to us!
Are you still experiencing this issue?
can you confirm that you are running into this issue when running this sample app:

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