reactjsjsxgatsbyeventbrite

How to use Eventbrite's Embedded Widget with React/JSX?


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>

Solution

  • 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
                });
            `
        }}
    />