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
.
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.
Method | Description |
---|---|
.showCheckoutModal | A method that opens the checkout modal. |
.showTicketModal | A method that opens the ticket modal. |
.presenter.show | A 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
Event ID
If set, the automatically detected language of the checkout will be overridden.
en
de
fr
lv
he
th
nl
es-MX
Undershop ID
Channel ID
List of ticket types to be preselected
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.
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.
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.
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.
.showTicketModal
A method that opens the ticket modal.
/**
* @param {object} ticketParams - An object that contains information about the ticket
*/
VIVENU.showTicketModal(ticketParams)
ticketParams
Ticket ID
The ticket's secret value
If set, the automatically detected language of the checkout will be overridden.
en
de
fr
lv
Configuration for the modal
Hides the Apple and Google Wallet button
Hides the Ticket Download button
Hides the Barcode
Hides the Apple Wallet button
Rather than displaying a cookie consent banner, the cookie consent settings can be managed externally and passed along to avoid prompting the user twice.
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.
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.
.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
Event ID
If set, the automatically detected language of the checkout will be overridden.
en
de
fr
lv
he
th
nl
es-MX
Undershop ID
Channel ID
List of ticket types to be preselected
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.
Callbacks
Event | Trigger |
---|---|
onCheckoutCompleted | A callback that will fire when a checkout process is completed successfully. |
onTicketPersonalized | A callback that will fire when a ticket was successfully personalized. |
onTicketCancelled | A 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
The associated checkout
The ID of the checkout.
The secret token of the checkout.
The status of the checkout.
NEW
ABORTED
COMPLETE
The type of the checkout.
transaction
upgrade
rebooking
purchaseintent
subscription
The ID of the seller of the checkout.
An array of checkout items each representing the 'bag' of one shop.
The ID of the checkout item.
The ID of the event containing the item.
The regular price of the checkout item.
The calculated price of the checkout item.
The outer charge of the checkout item.
Optional Attributes
Collapse allThe calculated real price of the checkout.
ID of the completed checkout.
Amount of money that was handled through this checkout.
Optional Attributes
Collapse allonTicketPersonalized
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
ID of the personalized ticket.
The entered name during personalization.
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
ID of the personalized ticket.