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-1if (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 checksif (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.