EventBrite's popup widget isn't compatible with React / JSX / GatsbyJs. Looking for help on how to appropriately implement this on a Gatsby site. If you've done this before, what did you do? This is the code they give:
<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>
First run command cp .cache/default-html.js src/html.js
in root of gatsby project in terminal
It will get access to html.js file. There you can put code you need like this:
<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>
<script
dangerouslySetInnerHTML={{
__html: `
var exampleCallback = function() {
console.log("Order complete!");
};
window.EBWidgets.createWidget({
widgetType: "checkout",
eventId: "52766401728",
modal: true,
modalTriggerElementId: "example-widget-trigger",
onOrderComplete: exampleCallback
});
`
}}
/>