Description
Regarding use of the @zoomus/websdk/embedded Embedded Component version “^2.1.1”
My team is working on integrating the Web Component View into our application.
We were very excited to see the Docs say “The Component View provides the option to display the Web Meeting SDK in components on your page. This allows for a more flexible design.”, but have so far had trouble altering any visual aspect of the Web Component. The Web Component seems to be completely inflexible in 3 visual areas that kind of cripple the experience:
-
There is no way to style the actual size of the Zoom Component! The Web Component renders very small of the screen (244pixel wide) and ignores the size of the parent element specified within the zoomClient.init() function. Changing the size of the #zoomSdk Container element doesn’t affect the size of the meeting window, and there is no mention anywhere in the Component View docs about how to apply custom styles to the component. I’d expect at the least for it to be very clear on how to control the size of the overall Zoom meeting, and all of the inline style edits I’ve made within Chrome Devtools (which override all style definitions) do nothing to enlarge the Component.
-
The SDK injects a style tag that positions the sdk-container Element in the top right of the page with an absolute position:
style="display: flex; position: absolute; top: 8px; right: 8px;"
. Since this is injected into the html as an attribute, there is no way to override the style without adding!important
flags to the CSS targeting the Container; that should not be the case for a Component that is advertised as “flexible design”. -
The Component view is wrapped in React-Draggable (I can see from its HTML class attribute) and therefore can be repositioned within the Webpage to the end-user’s like, but there is not opt-in or opt-out for this functionality. My team is building a Video call experience with a very specific layout design; having the Component view be a draggable component is not mentioned anywhere in the documentation and in my opinion is not a desireable UI for many teams that want to fix the Zoom component somewhere on the screen. Is there any config exposed by the package to disable this draggable behavior?
I’m not trying to sound overly critical, but it was an unpleasant surprise to say the least that after a few hours of trying to get everything configured, we are stuck with a tiny little Zoom window that is draggable around the page and doesn’t obey any layout or sizing style rules specified by the parent application. My questions that are not covered in the docs (to my knowledge) are the follow:
- Are there any recommended methods or configuration for altering the position, size and general styling for the Web Component? I see nothing in the docs beyond the toolbar button config within the customize object of the client.init() function.
- Is there any way to disable the draggable behavior of the Component?
If I’m mistake, please direct me in the right direction or documentation that I may have missed.
Browser Console Error
The full error message or issue you are running into.
Which Web Meeting SDK version?
“^2.1.1”
Meeting SDK Code Snippets
The code snippets that are causing the error / issue so we can reproduce.
To Reproduce(If applicable)
Steps to reproduce the behavior:
- Install the latest @zoom1234/websdk ("^2.1.1") package to any frontend repo
- Initialize the client and join a meeting
- Attempt to make style changes to the Component (either by CSS !mportant flags, inline style attributes) to change its size on the page
Screenshots
If applicable, add screenshots to help explain your problem.
Device (please complete the following information):
- Device: Macbook Pro 2020 M1
- OS: Latest Mac OS
- Browser: Latest Firefox and Chrome
Additional context
Add any other context about the problem here.