I have added a script to a floating html box that allows customers to check availability for our hotel.
Once published, the script is replicating the mobile version of the website… the script seems fine. Any suggestions or fixes?
You can see the problem when you scroll down and the floating box appears. The top-left corner of the website has a “Reservation” button. If you click that the corrext script appears. Both are identical. http://antigua.webflow.com/rooms-and-accommodation-miraflores
Hi there @Shawn, it is always a little tricky to troubleshoot external scripts, but looking at this one, I can see that this script is calling some javascript that is linked in the embed, and that javascript is creating an iframe dynamically into the “check availability” container that you have placed on your page. The main issue that I can tell, is that when you have this same embed code on the page from that reservation service, the reservation javascript from that embed code is trying to create two iframe elements with the same unique ID on your page, thus only one of the iframes with same unique ID get populated (the first one encountered in the document object model).
So I think, your options are to 1. Get a second script from that reservation service that uses a different iframe unique id for the second reservation form, or just use one of those forms per page in Webflow.
One more thing, you should consider, is that the scroll interaction you have set on the reservation window, will not work on iOS devices (should work on android etc). Currently scroll interactions are disabled on iOS touch devices mainly because the way they refresh content (based on touch events, not scroll events), so any element which has a starting interaction to display the element with opacity set to 0, would be shown visible at start on iOS devices.
So you might rethink this particular scroll interaction, unless having this window open at start on iOS devices is ok with you.