Eventbrite embedded checkout freezes scroll if closed

I embedded a coded CTA button that load an iframe on two different pages. The same exact Eventbrite embedded code on both CTA's. One works totally fine (scroll is not affected if I close the iframe):

https://www.lnstake.org/chalk-walk-checkout-page

This other one locks up after I open the embedded iframe and then close it, I cannot scroll unless I reload the page:

https://www.lnstake.org/christmas-chalk-walk

The iframe also flickers and seems to reload 2 or 3 times. The other one does not have this issue.

What would be the cause of this error? Is there something on this last page that is causing the page to break?

Update: I actually realized that the problem is I am using this embedded code multiple times. It worked fine on the test page because I only had one CTA compare to 4 on the bad page. So my question would be, is this happening because it is pulling the library 4x? How can i simplify this embedded code for buttons 2-4 on that page if the JS library is loaded?

Here is the embedded code I used:

<!-- Noscript content for added SEO -->
<noscript><a href="https://christmas-chalk-walk.eventbrite.com" rel="noopener noreferrer" target="_blank">Buy Tickets on Eventbrite</a></noscript>
<!-- You can customize this button any way you like -->
<center>
<button id="eventbrite-widget-modal-trigger-472644972837" class="eventbrite" type="button">RESERVE A SPOT</button>
</center>
<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
    var exampleCallback = function() {
        console.log('Order complete!');
    };

    window.EBWidgets.createWidget({
        widgetType: 'checkout',
        eventId: '472644972837',
        modal: true,
        modalTriggerElementId: 'eventbrite-widget-modal-trigger-472644972837',
        onOrderComplete: exampleCallback
    });
</script>

55 minutes ago, Laguna_Niguel said:

 

I embedded a coded CTA button that load an iframe on two different pages. The same exact Eventbrite embedded code on both CTA's. One works totally fine (scroll is not affected if I close the iframe):

https://www.lnstake.org/chalk-walk-checkout-page

 

This other one locks up after I open the embedded iframe and then close it, I cannot scroll unless I reload the page:

https://www.lnstake.org/christmas-chalk-walk

The iframe also flickers and seems to reload 2 or 3 times. The other one does not have this issue.

What would be the cause of this error? Is there something on this last page that is causing the page to break?

 

Update: I actually realized that the problem is I am using this embedded code multiple times. It worked fine on the test page because I only had one CTA compare to 4 on the bad page. So my question would be, is this happening because it is pulling the library 4x? How can i simplify this embedded code for buttons 2-4 on that page if the JS library is loaded?

 

Here is the embedded code I used:

 

<!-- Noscript content for added SEO -->
<noscript><a href="https://christmas-chalk-walk.eventbrite.com" rel="noopener noreferrer" target="_blank">Buy Tickets on Eventbrite</a></noscript>
<!-- You can customize this button any way you like -->
<center>
<button id="eventbrite-widget-modal-trigger-472644972837" class="eventbrite" type="button">RESERVE A SPOT</button>
</center>
<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
    var exampleCallback = function() {
        console.log('Order complete!');
    };

    window.EBWidgets.createWidget({
        widgetType: 'checkout',
        eventId: '472644972837',
        modal: true,
        modalTriggerElementId: 'eventbrite-widget-modal-trigger-472644972837',
        onOrderComplete: exampleCallback
    });
</script>

You can try adding your custom code on Home > Settings > Advanced > Code injection, choose footer, only add the <script> tag

On the code block, you only need the HTML code on it so the script code won't be duplicated