Adding popup overlay functionality to an embedded plugin allows you to create a link or button on your web page, that when clicked, will trigger the VBO Tickets plugin to pop up on the page in an overlay. This way your patron does not leave the current page, and can close the overlay to resume browsing the page.
To set this up:
1. Go to your plugins area in VBO and create a new plugin, or select an existing one by clicking the title.
2. Select the "Embed type" option and choose one of the popup overlay styles.
3. Make sure the "Auto Load" option is set to "No."
4. Click the "Embed Code" button at the bottom.
5. In the first box, click inside to select the code, then copy it. Paste this code only into the page of your website where you would like the overlay to display.
Pro tip: Add the plugin code to the Head of your website to load it on every page if you plan to only use the popup overlay plugin throughout your site. Or, conditionally load the overlay code in the Head of only the pages you plan to use it on.
6. Copy or take note of the Trigger Button code in the second box. This button code contains attributes you'll need to add to your own web page button or link.
Required attributes:
class="MyEventButton"
Recommended attributes:
siteid="51E3800B-3818-40D6-9483-ACA64B9E2375"
The siteid is the long number you see when editing a plugin. This may also be referred to as plugin ID. Change this to the ID of the plugin you wish to load in the popup overlay.
Optional attributes:
eid="0" edid="0"
These are event ID and event date ID. Find them on your open events. Change the zero to your actual event IDs to load a specific event in the popup overlay.
Pro Tip: To make your own HTML button you can create a link instead of using the div tags. Then, add the classes from another button you find on your website to give it shape and color:
<a href="javascript:;" class="MyEventButton button-class-from-your-website" siteid="51E3800B-3818-40D6-9483-ACA64B9E2 375">BUY TICKETS</a>Pro Tip: You can add multiple buttons on the same page to trigger multiple overlay popups which will load different plugins. To do this, just change the siteid to equal that of each plugin. For example, button A has siteid="1234" which loads your subscriptions plugin, and button B has siteid="5678" which loads your memberships plugin. No need to change the main embed code. Only the siteid in your buttons or links.
Note: If you are using a page builder such as WordPress, Squarespace, or Wix, you may not be able to add special attributes to your buttons or links from the module options. In that case, you need to add a "Code" or "HTML" module to the page, and manually add your button or link code (as seen in the second box in the image above).