Square up provides a couple different ways to add appointment booking to an external website. I am working with a WordPress site with Elementor using the Astra theme, and I’ve attempted to create a shortcode with the following snippet. What happens is that the Square appointments takes up the entire preview pane of the editor, so I can’t edit the rest of the page, or even access the shortcode/remove it.
<!-- Start Square Appointments Embed Code --><script src='linkhere'></script><!-- End Square Appointments Embed Code -->
I was able to get the calendar on WordPress by just adding the URL source in an iframe, like below, but the problem is it doesn’t show up on mobile (at least on Google Chrome). On desktop, a static height is needed to display properly.
<iframe height="1800px" src="linkhere"> </iframe>
What all can I do to address these problems? I need this embedded, but I need to be able to continue making changes to the web page in the editor. I tried templating it, but it will still render, even in a template. I tried using CSS to fix the width/height, no success. 🙁
Please help me!