Description
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?
2.16.0
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
zmClient
.init({
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: [
"topic",
"host",
"mn",
"pwd",
"telPwd",
"invite",
"participant",
"dc",
"enctype",
],
},
})
.then((e) => {
console.log("FIRST PROMISE");
console.log("success", e);
})
.catch((e) => {
console.log("error", e);
});
Screenshots
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:
https://developers.zoom.us/docs/meeting-sdk/web/component-view/positioning/
Any help is appreciated guys, thanks!