All Collections
Integrations
Eventive Everywhere
Getting Started with Eventive Everywhere
Getting Started with Eventive Everywhere

Code Blocks, Buttons and Widgets, oh my! How to configure Eventive Everywhere buttons and widgets to get them working on your site.

Kimberley Busato avatar
Written by Kimberley Busato
Updated over a week ago

The basic scripts that you need to get started with your first Eventive Everywhere buttons and widgets can be found by visiting your Event Bucket settings page and clicking “Open Eventive Everywhere”.

Enable Eventive Everywhere

To enable Eventive Everywhere on your site, there is a block of code that you need to copy and paste immediately before the closing </body> tag at the bottom of your page.

The code can be found by visiting your Event Bucket Settings and clicking the “Open Eventive Everywhere” button and copying the first block of code at the top of the Eventive Everywhere dialogue box.

Then include as many of the following widgets as you'd like!

How to find Event IDs

The following Eventive Everywhere widgets use Event IDs to identify and connect with your events. An Event ID is a unique string of characters that corresponds to a specific event – each event in your event bucket will have its own Event ID.

To make the following widgets work, you’ll need to replace the text “REPLACE_WITH_EVENT_ID” in the following scripts with the Event ID that corresponds to the event that the widget is being created for. Event IDs can be found by looking at your event’s URL:

Example:

For the above url, the Event ID is 595ace5d28021f001e567dcc.

Event IDs can also be retrieved programmatically by enumerating events using the Eventive API.

Order Tickets button

The Order Tickets button looks and behaves the same as the Order Tickets button on a typical Eventive site, and launches a modal dialog for customers to complete checkout when clicked. Customers never have to leave your site to complete the transaction!

To add an Order Tickets button to your website, paste the following code where you would like the Order Tickets button to appear.

<div class="eventive-button" data-event="REPLACE_WITH_EVENT_ID"></div>

Note: When customers have already ordered tickets, the order tickets button updates to reflect this.

And if customers have passes, their passes will automatically be recognized and they'll be given the option to use their passes, right there in the dropdown.


Embedded Virtual Player

To add an Embedded Virtual Player in order to sell and stream Video On Demand (VOD) content directly on your website, use the Order Tickets button code from the previous section, using the event ID of a virtual screening.

<div class="eventive-button" data-event="REPLACE_WITH_EVENT_ID"></div>

When the event ID of a virtual screening is added to the Order Tickets Bucket Code, the button will become an Unlock Now / Preorder Now / Watch Now button. When Watch Now is clicked, the player will expand to fill the entire browser window. To use the Eventive Everywhere Embedded Virtual Player on your website, an Eventive Virtual activation is required.

Note: The embedded virtual player is for VOD screenings only. Livestream and VOD + Livestream screening types are currently not supported by the embedded virtual player.

For pre-orders, the “watch-now” button in the confirmation email will lead to the Eventive Virtual screening page.

Pass Bucket code

When embedding certain Pass Bucket elements, you will be required to specify the Pass Bucket code, which can be found in the Pass Bucket's settings page, under URL code:

Buy Passes button

To add a Buy Passes button to your website, paste the following code where you would like the Buy Passes button to appear.

<div class="eventive-button" data-pass-bucket="REPLACE_WITH_PASS_BUCKET_CODE" data-buy-label="Buy now" data-quantity="1" data-discount=""></div>

Login widget

The Login widget is a simple text & link combo that either says "Log in to your account" or "Logged in as 'YOUR_NAME”. Log out" based on the current user's authentication status.

To add the Login widget to your website, please paste the following code where you would like the Login widget to appear.

<div class="eventive-login"></div>

Tip: Most integrations include the login widget in the upper righthand corner of the page, so users know at a glance if they're logged in or not.

The Login widget is completely unstyled, making it ready to be integrated into your site's design. To style this widget, please define the attributes for the class “eventive-login” in your website’s stylesheet.

For customized access to display customers’ Passes and Tickets seamlessly in your website, you may use the Client-side API Wrapper to call all the customer account details into your site.

Custom checkout dialog

If you have your own "Order Tickets" button HTML, you can wrap it in the Eventive Everywhere snippet and when customers click the button, an Eventive checkout modal will appear.

<div class="eventive-custom-button" data-event="REPLACE_WITH_EVENT_ID">
/* Your custom HTML goes here */
</div>

Note: The Custom checkout dialog does not allow customers to use passes. For pass functionality, see "Order Tickets Button" above.

And more!

More Eventive Everywhere widgets and buttons are coming soon! Let us know what you'd like to see next by adding a note on our Feature Request page.

Did this answer your question?