For the best purchase experience, we recommend using the Lightbox feature for desktop displays and redirecting users to the VBO-hosted page for mobile displays.

Below are the steps to integrate VBO with your Wix site for an optimal desktop and mobile experience:

Creating a Lightbox for Desktop View


Click Pages & Menu > Lightboxes > Add Lightbox

Image Placeholder

Choose a Lightbox design from the available options

Image Placeholder

Remove default elements from within the Lightbox

Image Placeholder

Change the overlay background to black from the color menu and 75% opacity from the settings menu

Image Placeholder

Click the design option from the Lightbox editor and change the opacity to 0% from the settings menu

Image Placeholder

Embed URL or Plugin into Your Lightbox


Click Add Elements > Embed Code > Embed a Site

Image Placeholder

If embedding a link to a specific event, paste the URL into the website option and click Apply. If embedding a plugin, paste the embed code into the available box and click Apply.

Image Placeholder

Use the design tools to set the Lightbox size to 920 x 850. Then you'll be able to resize the VBO event or plugin to fit within the Lightbox. You'll also be able to move the X that will close the window.

Image Placeholder

Rename your Lightbox from the menu for easy identification. We recommend creating a default Lightbox template that you can duplicate whenever you need to set up a new one.

Image Placeholder

Use the same menu option to create duplicate Lightboxes when you need them.

Image Placeholder


Attach Lightbox to a Button


Navigate to the page where the customer will complete their purchase and click "Add Element" > Click Button > Choose your desired Button Theme

Image Placeholder

Place the button where you want users to access the Lightbox. Click the link option on the button and choose the Lightbox you want to attach

Image Placeholder

Create a Redirect for Mobile View


Toggle to mobile view via the options in the top left corner of your screen

Image Placeholder

Select the button that is linked to the Lighbox > Right Click > Choose Duplicate

Image Placeholder

Click the hide option on the original button. This will hide the button in mobile view, but display it in desktop view.

Image Placeholder

Position duplicated button and link it to the web address of your event

Image Placeholder