Embedding on Wix Websites

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.png


Choose a Lightbox design from the available options

image.png

Remove default elements from within the Lightbox

2025-01-14_08-21-41.gif

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

image.png

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

image.png

Embed URL or Plugin into Your Lightbox

Click Add Elements > Embed Code > Embed a Site

image.png

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.png

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.

2025-01-14_09-00-56.gif

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.

2025-01-14_10-43-29.gif


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

2025-01-14_10-46-26.gif


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.png

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

2025-01-14_17-45-08.gif


Create a Redirect for Mobile View

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

image.png


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

2025-01-14_18-02-05.gif


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

image.png


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

2025-01-14_18-07-59.gif