angulareventbrite

Widget Eventbrite in Angular


To do a checkout in eventbrite, in documentation use a Widget that extends window (https://www.eventbrite.com/platform/docs/embedded-checkout), but how to use vanilla code in angular?, I've done this:

  1. Put <script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script> in index.html
  2. Create component with button <button id="eventbrite-widget-trigger" type="button">Buy Tickets</button>
  3. Create a .ts with widget configuration:
    const eventbriteCallback = function () {
      console.log("Order complete!");
    };
    
    window.EBWidgets.createWidget({
      widgetType: "checkout",
      eventId: "52766401728",//Here is event dinamically
      modal: true,
      modalTriggerElementId: "eventbrite-widget-trigger",
      onOrderComplete: eventbriteCallback,
    });

But how to merge vanilla code (point 3) with a component (point 2) and send the eventId dinamically? Or somebody has integrated checkout in eventbrite with angular?


Solution

  • Thanks Abderrahim Soubai-Elidrisi I solved my problem doing this:

    add the script in the scripts array of the file angular.json

    Followed the steps in this post: How to call JavaScript functions from Typescript in Angular 5?

    1. Create the file in folder: src/assets/js/eventbrite/register.js, here put:
        function registerEvent(eventId, action) {
          const button = document.createElement("button");
          button.setAttribute("id", "example-widget-trigger");
          button.setAttribute("type", "button");
          document.body.appendChild(button);
          button.style.display = "none";
          setTimeout(() => {
            document.body.removeChild(button);
          }, 200);
        
          window.EBWidgets.createWidget({
            widgetType: "checkout",
            eventId: eventId,
            modal: true,
            modalTriggerElementId: "example-widget-trigger",
            onOrderComplete: action,
          });
        
          button.click();
        }
    
    1. In angular.json search projects.architect.scripts and add src/assets/js/eventbrite/register.js to array scripts
    2. To call the function, after imports: declare function registerEvent(eventId, action): void;
    3. Call registerEvent(eventId, exampleCallback); Show steps 3 and 4