Embed.js

Embed.js is a JavaScript library that enables you to embed the vivenu checkout flow right into your website. With Embed.js, you can sell tickets to any event (that's handled by vivenu) on your website without having to write any code.

Setup Embed.js

You need to include Embed.js on your page by adding the script tag at the end of body of your HTML.

<script type="text/javascript" src="https://vivenu.com/web/deliver/js/v1/embed.js"></script>

Next, Embed.js will automatically be initialized and become available as a global variable called VIVENU.

Example
<html>
    <body>
        ...

        <script type="text/javascript" src="https://vivenu.com/web/deliver/js/v1/embed.js" />
    </body>
</html>

Usage

To simply get started, add useEmbed=true to your event url:

<a href="https://vivenu.com/event/[your-event-id]?useEmbed=true">Buy Tickets</a>
What's happening here?

Once you add useEmbed=true to your event link, Embed.js assigns a click event handler to that link.

This link will open up a checkout modal window where your buyers can safely book tickets through our checkout flow without leaving your website. And the rest of the checkout process will be handled automatically by Embed.js.

Methods

Embed.js exposes some useful methods that you can use to programmatically manage the differents modals.

MethodDescription
.showCheckoutModalA method that opens the checkout modal.
.showTicketModalA method that opens the ticket modal.
.presenter.showA deprecat method that opens the checkout modal.

.showCheckoutModal

A method that opens the checkout modal.

/**
 * @param {object} checkoutParams - An object that contains information about the event
 */
VIVENU.showCheckoutModal(checkoutParams)

checkoutParams

id
Required
string

Event ID

lang
Optional
enum

If set, the automatically detected language of the checkout will be overridden.

endefrlvhethnles-MX
baseUrl
Optional
string
shop
Optional
string

Undershop ID

channel
Optional
string

Channel ID

preselect
Optional
array<string>

List of ticket types to be preselected

testing
Optional
boolean

If true, the checkout modal will open in testing mode. The testing mode can be used to emulate how events that are not on sale look like before they go live.

embedded
Optional
boolean
cookieConsent
Optional
object

Pre-set the cookie consent in the modal. Will prevent the cookie banner from showing up. Providing an invalid object will disable all non-functional tracking but still hide the cookie banner.

cookieConsent.marketing
Optional
boolean

Enable or disable consent to marketing categorized trackers. Those trackers are helping to deliver personalized content as well as offers that are relevant to the customer.

cookieConsent.performance
Optional
boolean

Enable or disable consent to performance categorized trackers. Those trackers allow us to gather data about how customers interact with the website. This information helps to improve the website's functionality and performance, as well as identify areas that may require improvement.

Example
VIVENU.showCheckoutModal({
   id: 'your-event-id',
   lang: 'de'
})

.showTicketModal

A method that opens the ticket modal.

/**
 * @param {object} ticketParams - An object that contains information about the ticket
 */
VIVENU.showTicketModal(ticketParams)

ticketParams

id
Required
string

Ticket ID

secret
Required
string

The ticket's secret value

lang
Optional
enum

If set, the automatically detected language of the checkout will be overridden.

endefrlv
baseUrl
Optional
string
config
Optional
object

Configuration for the modal

config.hideWallet
Optional
boolean

Hides the Apple and Google Wallet button

config.hideTicketDownload
Optional
boolean

Hides the Ticket Download button

config.hideBarcode
Optional
boolean

Hides the Barcode

config.hideAppleWallet
Optional
Deprecated
boolean

Hides the Apple Wallet button

cookieConsent
Optional
object

Rather than displaying a cookie consent banner, the cookie consent settings can be managed externally and passed along to avoid prompting the user twice.

cookieConsent.marketing
Optional
boolean

Enable or disable consent to marketing categorized trackers. Those trackers are helping to deliver personalized content as well as offers that are relevant to the customer.

cookieConsent.performance
Optional
boolean

Enable or disable consent to performance categorized trackers. Those trackers allow us to gather data about how customers interact with the website. This information helps to improve the website's functionality and performance, as well as identify areas that may require improvement.

Example
VIVENU.showTicketModal({
   id: 'your-ticket-id',
   secret: 'the-secret-value-for-your-ticket',
   config: {
       hideWallet: true
       hideTicketDownload: true,
       hideBarcode: true,
   }
})
DEPRECATED

.presenter.show

A method that opens the checkout modal.

/**
 * @param {object} checkoutParams - An object that contains information about the event
 */
VIVENU.presenter.show(checkoutParams)

checkoutParams

id
Required
string

Event ID

lang
Optional
enum

If set, the automatically detected language of the checkout will be overridden.

endefrlvhethnles-MX
baseUrl
Optional
string
shop
Optional
string

Undershop ID

channel
Optional
string

Channel ID

preselect
Optional
array<string>

List of ticket types to be preselected

testing
Optional
boolean

If true, the checkout modal will open in testing mode. The testing mode can be used to emulate how events that are not on sale look like before they go live.

embedded
Optional
boolean
Example
VIVENU.presenter.show({
   id: 'your-event-id',
   lang: 'de'
})

Callbacks

EventTrigger
onCheckoutCompletedA callback that will fire when a checkout process is completed successfully.
onTicketPersonalizedA callback that will fire when a ticket was successfully personalized.
onTicketCancelledA callback that will fire when a ticket was successfully cancelled (invalidated).

onCheckoutCompleted

A callback that will fire when a checkout process is completed successfully.

/**
 * @param {object} checkout - An object that contains information about the completed checkout process
 */
VIVENU.onCheckoutCompleted = (checkout) => {
  console.log(checkout)
}

Parameters

checkout
Required
object

The associated checkout

checkout._id
Required
string

The ID of the checkout.

checkout.secret
Required
string

The secret token of the checkout.

checkout.status
Required
string

The status of the checkout.

NEWABORTEDCOMPLETE
checkout.type
Required
string

The type of the checkout.

transactionupgraderebookingpurchaseintentsubscription
checkout.sellerId
Required
string

The ID of the seller of the checkout.

checkout.items
Required
array

An array of checkout items each representing the 'bag' of one shop.

checkout.items[]._id
Required
string

The ID of the checkout item.

checkout.items[].eventId
Required
string

The ID of the event containing the item.

checkout.items[].regularPrice
Required
number float

The regular price of the checkout item.

checkout.items[].realPrice
Required
number float

The calculated price of the checkout item.

checkout.items[].outerCharge
Required
number float

The outer charge of the checkout item.

Optional Attributes

Collapse all
checkout.realPrice
Required
number float

The calculated real price of the checkout.

checkout.id
Required
Deprecated
string

ID of the completed checkout.

checkout.value
Required
Deprecated
number

Amount of money that was handled through this checkout.

Optional Attributes

Collapse all

onTicketPersonalized

A callback that will fire when a ticket was successfully personalized.

/**
 * @param {object} ticketInfo - An object that contains information about the completed checkout process
 */
VIVENU.onTicketPersonalized = (ticketInfo) => {
  console.log(ticketInfo)
}

Parameters

ticketInfo
Required
object
ticketInfo.id
Required
string

ID of the personalized ticket.

ticketInfo.name
Required
string

The entered name during personalization.

ticketInfo.extraFields
Required
object

Additional information entered during personalization.

onTicketCancelled

A callback that will fire when a ticket was successfully cancelled (invalidated).

/**
 * @param {string} ticketInfo - An object that contains information about the cancelled ticket
 */
VIVENU.onTicketCancelled = (ticketInfo) => {
  console.log(ticketInfo)
}

Parameters

ticketInfo
Required
object
ticketInfo.id
Required
string

ID of the personalized ticket.