Eventbrite's checkout widget isn't displaying

[kalturnbull]

I’m trying to embed the Eventbrite checkout widget using the code from this article in a HTML element: Platform | Eventbrite

I’m testing this on a page with no other elements. I’ve tried selecting the ‘display as iFrame’ checkbox, but still the widget doesn’t display on preview – the page is blank.

Has anyone been able to successfully embed this widget?

[Nocodify]

Are you using this popup checkout widget? In an HTML element?

<button id="example-widget-trigger" type="button">Buy Tickets</button>

<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: "52766401728",
    modal: true,
    modalTriggerElementId: "example-widget-trigger",
    onOrderComplete: exampleCallback
  });
</script>

Learn no code → nocodify.com

[kalturnbull]

I’ve tried both the popup checkout and non-modal checkout widgets, in HTML elements, and can’t get either of them to work. The button shows for the popup checkout but nothing happens when I click it.

[Nocodify]

Did you try putting the javascript snippet in the header of the page?

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

[kalturnbull]

I hadn’t tried that before, but it doesn’t seem to make any difference unfortunately.

[emma1]

did you find a fix for this, @kalturnbull ? I’m struggling with the same thing

[kalturnbull]

I misread @Nocodify’s suggestion and put both of the javascript snippets in the header of the page. If you put just the first script in the page header and leave the second script in the HTML element, it works.

After this, I struggled with using dynamic data for event ID in the HTML, but solved it by setting a custom state upon page load for the html element in which the dynamic ID is saved as text, which I then reference in the html. I’m guessing the problem is the widget was trying to load before the event ID was loaded.

Edit: I should add that I’m using the popup checkout. I’m not sure if the dynamic data solution works for the non-modal checkout.