Trouble with code on webpage

Hi All,

I really hope someone can help me out here as I am in a bind and cannot figure this out on my own.  We have started using a new vendor for our business that has provided a scheduling widget that is insertable into squarespace using the code feature.  We are having issues with our booking page when people try to schedule using the widget on mobile.  When they select an option to book and hit next, something in the code on the page causes the user's screen to automatically leap to the bottom of the web page requiring users to have to scroll up on their phones to continue the process.  This error can be duplicated using the mobile preview option in squarespace and loading the widget.  

Here is the page with the scheduler we are running into issues with https://www.superiormassagetherapy.com/scheduling

Here is a video of what this issue looks like in real time.  https://photos.app.goo.gl/2e2JMp4KLLPGhXgM7

I have tested this using https://htmledit.squarefree.com/ using the code provided by our vendor on a mobile device and I do not get the issue I do on squarespace.  I have been on the phone with our vendor for hours and we have done testing with other sites and devices and I cannot duplicate the issue on any of them.  This leads me to believe there is something on squarespace or something I am not seeing that is causing the issue.  Squarespace immediately dismissed my issue so I am hoping someone on here could help me out. 

I very much appreciate any help you can provide!

-Steve 

This is an issue with the widget code. It is changing the iframe height during the transaction, resulting in the strange effects that you see.

I recommend placing the code on a page by itself, without the blocks above and below. These may be the cause of the issue (insufficient space) but even if they aren't, the button and text make the UI more confusing.

Rather than providing the button linking to the other page, why not simply make the /scheduling link take users to the externally hosted site? You can do this by adding a 'link' to the Navigation instead of the page containing the code.

I'll confirm what Paul says. The height of the iframe is becoming zero (either intentionally or unintentionally) which causes the appearance of scrolling to the bottom (when really what's happening is the page simply shortens).

Now I'm just some random developer on the internet, but glancing at the widget code, it appears that what's supposed to happen is the height of the iframe is to be reset to a new height and then the iframe sends a message to the parent (via window.postmessage()) to scroll to the desired location. If I had to guess, there's a race condition occurring between the setting of the height (or its animation) and the scrollto function in the parent window context. The "setIntervals/timeouts" in the code support this theory (they might be an attempt by the developers to work around the known race condition). So this isn't really Squarespace's issue. It may, however, be made more apparent when hosted within Squarespace due to exacerbated performance.

This sort of use of iframes, postmessage and height-/scroll-setting can get very complicated. So again, take my once-over of the code for what it's worth.

I understand the desire to keep the user experience within your own website/domain. However, I agree with Paul that the UI, as you have it within your site, is relatively confusing. In a case like this, I'd encourage a client to link to the third-party site and forego the complexity and confusion of the iframe (though obviously, I'm not privy to the myriad of considerations and evaluation that lead you to where you are).

Thankyou.  Seriously.  

I try my best to manage this website for my wife and her staff while handling most of the back end of the business, but switching vendors on literally everything the last few weeks has me pulling my hair out.  My day job doesn't allow me to devote the time I would like to dig super deep into all of this and I know enough web design to be dangerous.  I will do some more testing to see what we can do.  I will also pass along the things you guys have pointed out to our vendor.  

People like you guys ROCK.