embed2.js

❗️

For Developers

This document assumes a technical familiarity with the embed2.js product, and provides technical details about Universe's checkout experience.

By including embed2.js on your site, you gain access to programmatic control of the Universe checkout experience through query parameters on URLs and a JavaScript API.

Installation

To begin, simply add the following script before the closing body tag on the page you would like to open the checkout:

<script src="https://www.universe.com/embed2.js"></script>

By default, embed2.js will open the Universe checkout on any links to your Universe event page (ex. https://www.universe.com/events/end-of-unix-time-tickets-SZ1675).

Query Params

When it's loaded on a page, embed2.js will search the current window.location for the following query parameter key/value pairs and execute the corresponding actions:

unii-trigger-open=#{id}

Where id is a the id of an event hosted on Universe. For example, in this url https://www.universe.com/events/end-of-unix-time-tickets-SZ1675 the id would be end-of-unix-time-tickets-SZ1675 (note that this is permissive - SZ1675 works just as well).

This will cause the Universe checkout experience for that event to load immediately once the DOMContentLoaded event fires in the browser.

unii-discount-code=#{code}

Where code is a valid Universe discount code configured for an event. This will cause the code to be applied automatically, by default, when the user opens the Universe checkout experience.

unii-access-key=#{key}

Where key is a valid Universe access key configured for an event. This will cause the key to be applied automatically, by default, when the user opens the Universe checkout experience.

API ($u)

When you include embed2.js on your page, Universe makes available a JavaScript interface to control opening the checkout experience. embed2.js creates an object called $u in the global window namespace and provides the following functions:

open(id: String, payload: Object)

Where id is a the id of an event hosted on Universe. For example, in this url https://www.universe.com/events/end-of-unix-time-tickets-SZ1675 the id would be end-of-unix-time-tickets-SZ1675 (note that this is permissive - SZ1675 works just as well).

This will cause the Universe checkout experience for that event to load immediately.

The second parameter, payload, is optional. This can be used to configure checkout state. The Object passed here can take the shape of:

{
  analytics: {
    host: {
      ref: String,
      url: String
    },
    google: {
      clientId: String 
    }
  },
  accessKeys: [String],
  currentDiscountCode: { 
    code: String
  }
}

For example, to open a checkout experience with an Access Key pre-applied, one might issue the following call:

$u.open('SZ1675', { accessKeys: ['TESTKEY'] })