Auto press the Next button of a widget after 5 secs

Question

I have the following widget on my website which loads a booking system. Is there a way to press the Next button after 5 seconds of loading?

<!-- Practice Better Booking Widget: start -->
<style>.better-inline-booking-widget{position:relative;overflow:hidden}.better-inline-booking-widget iframe{position:absolute;top:0;left:0;width:100%;height:100%}</style>

<div class="better-inline-booking-widget" data-url="https://my.practicebetter.io" data-course="63bdc7debc7ce781dd1860e0" data-hash="600ad6742a9c2416e0768660" data-theme="54a288" data-theme-accent="d74b33" style="width:100%;max-width:550px;height:800px;" data-scrollbar-visible="false"></div>

<script type="text/javascript" src="https://cdn.practicebetter.io/assets/js/booking.widget.js"></script>
<!-- Practice Better Booking Widget: end -->

I tried to add setTimeout(document.getElementsByName("Next").click(),5000); with no success

Answer 1

The button that's being rendered by your JavaScript is actually contained in an i-frame. i-frames follow the same-origin policy. This means that if you want to interact with the contents of the i-frame (including the button) via JavaScript in the page hosting the i-frame they both need to be on the same domain. If they are in the same domain then this is how you would click the button with JavaScript.

setTimeout(() => {
    let button = document.querySelector('.better-inline-booking-widget iframe').contentWindow.document.querySelector('button');
    button.click();  // This will throw an error unless the site is the same domain as the iframe
}, 5000);