Implementing 3rd party website Javascript modal box button

Using JavaScript with Hype
1

Hey,

i want to include a javascript of Eventbrite. This should be triggered by the click of a button and would open a modal box. This is the code which should be implemented in the hype page. how can I archive this? I know I can trigger custom javascript on click on a button. And I guess I have to implement the script type part within the custom javascript by copy and pasting it there. But how can I implement the first part with the button id to the hype button? Thank you

<!-- Noscript content for added SEO -->

< noscript><a href="[https://vypefrankfurt.eventbrite.de](https://vypefrankfurt.eventbrite.de/)" rel="noopener noreferrer" target="_blank"></noscript>

<!-- You can customize this button any way you like -->

< button id="eventbrite-widget-modal-trigger-111111111111111" type="button">Buy Tickets</button>

< noscript></a>Buy Tickets on Eventbrite</noscript>

 

< script src="[https://www.eventbrite.de/static/widgets/eb_widgets.js"></script](https://www.eventbrite.de/static/widgets/eb_widgets.js%22%3e%3c/script)>

 

< script type="text/javascript">

    var exampleCallback = function() {

        console.log('Order complete!');

    };

 

    window.EBWidgets.createWidget({

        widgetType: 'checkout',

        eventId: '111111111111111',

        modal: true,

        modalTriggerElementId: 'eventbrite-widget-modal-trigger-111111111111111',

        onOrderComplete: exampleCallback

    });

</script>
2

From what I understood from your post, I think, your only problem is to figure out how to add the ID to the button. Well, it’s the easiest part of this. Here’s how to do it:

Select your button > Go to Identity Inspector panel. There you can see, Unique Element ID. Just add the required ID there. Make sure not to use the same ID anywhere else in the Hype document.

3

Thank you for the info. Now it nearly works. The only problem I have now ist, that the window is not opening within a modal box but instead in a new window. But I guess I can live with that. Regards

4

Mhh to bad. When I tried it on mobile the next error occurred. The Script and the opening modal box on click of the button is working fine on desktop. But on mobile Devices (Ios and Android) it is not working. When you click the button nothing happens. What could be the problem here?

5

Just playing around with it. The widget ID isn’t correct and it needs to run from a https URL to work. Maybe this helps…

EBWidget.hype.zip (14,2 KB)

1 Like
6

Hey Max, thank you. I finally found my mistake. I loaded the script on Button click and that was the reason why it was just working on Desktop. When I load it with the scene like you did in your test, then it works for me on Desktop and Mobile.

1 Like