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 deprecated 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)
.showTicketModal
A method that opens the ticket modal.
/**
* @param {object} ticketParams - An object that contains information about the ticket
*/
VIVENU.showTicketModal(ticketParams)
.presenter.show
A method that opens the checkout modal.
/**
* @param {object} checkoutParams - An object that contains information about the event
*/
VIVENU.presenter.show(checkoutParams)
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)
}
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)
}
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)
}