This video will demo how to embed the VBO Tickets plugin on your Wix website. If other website platforms are available like Wordpress - we suggest that website builder over Wix.

Some considerations: 

With Wix, the main problem is that their platform forces the VBO plugin to be inside of a scrolling container. For example, here is our plugin on our demo website. https://demo.vbotickets.com/events/ you will notice that all the events populate down the page and only the main page scrolls. On Wix, this will be put inside a second container that has a scroll bar. To get around this on Wix you can force that second container to be super tall, to accommodate for a long list of events and avoid an extra scroll bar.

Another issue is with mobile, for similar reasons. Because Wix forces the plugin into their own container, it can limit usability on mobile. None of this makes it impossible to buy tickets through the plugin on Wix, but it's just not the normal experience you'd have without Wix.

In addition - the auto scroll setting on the plugin will not respond due to the way Wix embeds in an iframe. Wix has provided a workaround option for the auto scroll. The below code should be added as a custom code in the settings > custom code > add custom code area of your Wix editor. Please note: This workaround may not work on all web browsers.

<script>
document.addEventListener('DOMContentLoaded',function() {
   // Check if the URL contains 'event-collection-1
   if (window.location.href.includes('event-collection-1')){
      let initialChecks = 0;      
      let initialHeight = 0;
      let lastHeight = 0;
              
      setInterval(() => {          
         const element = document.querySelector('#comp-lxwobw3n> div > div');    
         if (element) {
            const height = element.clientHeight;
            console.log("Height of the element:", height);
                       
            // Set the initial height after the first 4 checks
            if (initialChecks < 2) {                   
               initialHeight = height;
               lastHeight = height;
               initialChecks++;
               console.log("Setting initial height after checks:", initialHeight);
               return;               
            }
               
            // Calculate the difference in height
            const heightDifference = lastHeight - height;
            console.log("Height difference:", heightDifference);
                       
            // If the height is less than the last recorded height, scroll by the height difference
            if (height < lastHeight && heightDifference > 0) {
               window.scrollBy(0, -heightDifference);
               console.log("Page scrolled up by " + heightDifference + " pixels");
               lastHeight = height; // Update the last height after scrolling
            } else {
               lastHeight = height; // Update the last height without scrolling if no change
            }
         } else {
            console.log("Element not found");
         }
      }, 2000); // 2000 milliseconds = 2 seconds
   } else {
      console.log("User is not on a page containing 'event-collection-1'.");
   }
});
</script>

If these limitations interfere with the ticket process, the best work around is instead of embedding the plugin on your website - use the hosted link redirects. For example, if you have a button on your page that says "buy tickets" you can link that button to your VBO hosted webpage and redirect the user to the VBO  hosted page.