Back to the Shapespark home page

Meetings overlay and HTML Box

Hi all,

Wonder if there is any easy fix for this? Ive attached a screenshot of the issue im having, essentially im using a HTML pop up to show off an information board, but where the meetings overlay is placed (top left) it interferes with the information.

Is there any easy way to move the overlay to the bottom left for example? Or the HTML pop up to the centre?

(also, please ignore the watermark!)

Many thanks,

We would like to address this problem by increasing the priority of the HTML popup, so it opens on top of the meeting status (the meeting status becomes invisible as long as the HTML pop up is visible). Do you think such approach is OK in your case?

1 Like

Hi @jan that would be a perfect solution!

Thanks for your quick reply with this.

Hi @jan

Sorry to be a pest with this, but is there any chance of this getting fixed for Monday? My client has the meeting on Monday so would be great if its good to go by then.

Also, another small issue with the meeting overlay is that it interferes with the branding on the top left of the screen. My client hasn’t picked up on this so not a huge issue for now, but maybe something for your team to have a little look into if its a quick fix!


Hi, we have this fix ready and will release it today.

1 Like

The fix is available now.

Hi @darylburton

you could write a js-script to remove the css classes of the html element which is the meeting overlay.
If I remember correctly the css classes to remove should be “ui-top” and “ui-left”. Then you can add new style attributes to place the element where you would like it to be.

Thanks @jan, works perfect.

@Ling, thank you for your reply. Ive not delved too much into changes the js-script. Is there any sort of online guide to follow for this so I can give it a go?

Hi @darylburton,

I am not sure, if there is a deepdive into skripting for shapespark. However you can add any js Skript via the viewer tab in the shapespark editor.

you can find further information about the shapespark API here:

If you need further help (i.e. because you are not into skripting in general), just let me know. You can PM me and we find a solution for your issue.

Best Ling

Hi @darylburton,

I cannot find any PM functionality, so I send you the lines of code you would need to put in a skript tag here:

var elementMeetingOverlay = document.getElementById(“ext-meeting-status”);
elementMeetingOverlay.classList.remove(“ui-top”); = “150px”;

You can enter any amount of Pixel instead of “150px” (like “280px”) to push the MeetingOverlay more to the bottom.

Hopefully this will solve your issue. Otherwise, let me know.

Best Ling

Hi @Ling

Thats incredibly helpful, thank you very much. The client will appreciate being able to have a meeting and their branding on show as well, ill give your solution a go.

Thanks again for your help, I sincerely appreciate it.