Tito Widget V2 Docs

The Tito widget V2 has the following goals in mind:

Extremely simple to use. One JavaScript include, one <tito-widget> element
Straightforward defaults, easily configurable
Easy to integrate with other tools
Use latest payment provider APIs
Fast and efficient. Should only load event details once, even for multiple elements

Tito widget basic usage is identical to v1:

<!-- place this in your head tag -->
<script src='https://js.tito.io/v2' async></script>

<!-- Place this where you want the widget to appear -->
<tito-widget event="ultimateconf/2013"></tito-widget>

<script src='https://js.tito.io/v2/with/inline/without/widget-css' async></script>

Form styles are loaded automatically. If you wish to load the widget unstyled, you can add with/inline/without/widget-css in the src attribute.

If you also want the order form to be unstyled, you can add with/inline/without/widget-css,checkout-css.

<script src='https://js.tito.io/v2/with/inline/without/widget-css,checkout-css' async></script>

<tito-button event="ultimateconf/2013"></tito-button>

If you just want a button, you can use tito-button. The button renders a button element with the tito-widget-button class. You can style this however you wish using CSS.

You can set the button label as you would ordinary html:

<tito-button event="ultimateconf/2013">My custom label</tito-button>

My custom label

You can pass a specific ticket or set of tickets to a widget, with the releases attribute:

<tito-button event="ultimateconf/2013" releases="3elajg6qcxu"></tito-button>

I only show one ticket

Show multiple tickets with a comma separated list:

<tito-button event="ultimateconf/2013" releases="3elajg6qcxu,6qiiw4socs4"></tito-button>

I only show two tickets

This works for the widget too:

<tito-widget event="ultimateconf/2013" releases="3elajg6qcxu"></tito-widget>

If you reference a secret ticket in the list of releases to show then it will be shown (the release is shown regardless of its secret status).

<tito-button event="ultimateconf/2013" discount-code="half-off"></tito-button>

I apply a discount code

This works for the widget too:

<tito-widget event="ultimateconf/2013" discount-code="half-off"></tito-widget>

I apply a discount code

The widget loading code expects to be loaded async, so when using the API, you should not expect that the tito function will be defined when you call it. Like other embedded JavaScript widget APIs, the tito function simply adds actions to a queue and processes them later.

<script>
window.tito = window.tito || function() { (tito.q = tito.q || []).push(arguments);};
</script>

You should define tito before you make any calls.

You can use the JavaScript API to load a widget on-demand without using the tito-widget or tito-button custom elements.

<script>
  tito("widget.mount", {el: "#tito-widget", event: "ultimateconf/2013"})
</script>

<div id="tito-widget"></div>

<script>
  tito("button.mount", {
    el: "#tito-button",
    event: "ultimateconf/2013",
    buttonLabel: "Register" // Optional, defaults to 'Tickets'
  })
</script>

<div id="tito-button"></div>

After you include the Tito JavaScript, you can create listeners to various events in the lifecycle of an order as it happens via the widget. Various data is also passed along with these lifecycle events.

The syntax for listening for these events is very simple:

<script>
  // This copes with the javascript being loaded
  // asycronously (recommended)
  window.tito =
    window.tito ||
    function() {
      (tito.q = tito.q || []).push(arguments);
    };

  // For example:
  tito('on:widget:loaded', function(data){
    // code here will be fired when the purchase form loads
  })

</script>

tito('on:widget:loaded', function(data){
  // code here will be fired when the purchase form loads
})

// Sample data
{
  "contact_email":    "hello@example.com",
  "currency":         "USD",
  "currency_symbol":  "$",
  "default_locale":   "en",
  "path":             "ultimateconf/2013",
  "releases": [
    {
      "price":        "100.0",
      "title":        "Early Bird",
      ...
    },
    {
      "price":        "120.0",
      "title":        "Regular",
      ...
    }
  ],
  "title":            "UltimateConf 2013"
}

on:widget:loaded

Fires as soon as all the javascript has loaded and the widget has been displayed.

tito('on:registration:started', function(data){
  // code here will be fired when the purchase form loads
})

// Sample data
{
  "slug":           "xyzdef123456",
  "line_items": [{
    "release_slug": "1234abcd",
    "price":        "4.00",
    "title":        "Regular",
    "quantity":     1,
    "total":        "4.00",
    "currency":     "USD"
  }]
}

on:registration:started

This happens when the purchase/registration form is displayed. It comes with a data object that contains the unique slug of the order, along with an object containing info about the tickets that the customer chose. eg.

tito('on:registration:finished', function(data){
  // code here will be fired when the purchase form loads
})

// Sample data
{
  "name":             "Joe Joe",
  "email":            "joe@joe.joe",
  "total":            "4.00",
  "currency":         "USD",
  "slug":             "1234defg",
  "reference":        "ABCD",
  "line_items": [{
    "release_slug":   "1234abcd",
    "price":          "4.00",
    "title":          "Regular",
    "quantity":       1,
    "total":          "4.00",
    "currency":       "USD"
  }],
  "tickets": [{
    "reference":      "ABCD-1",
    "slug":           "1234abcd",
    "price":          "4.00",
    "release_slug":   "1234abcd",
    "release_title":  "Regular",
    "name":           "Joe joe",
    "email":          "joe@joe.joe",
    "answers": {
      "question_id":        123,
      "question":           "What is the flight speed of an unladen sparrow?",
      "humanized_response": "1, 2 and 3",
      "response":           [1,2,3]
    }
  }],
  "receipt_url":        "http://ti.to/receipts/12345abcdef",
  "registration_url":   "http://ti.to/registrations/12345abcdef",
  "receipt": {
    "total":            "4.00",
    "tax":              "0.00",
    "payment_provider": "Stripe"
  },
  "discount_code":      ""
}

on:registration:finished

This happens when the order is finished but not necessarily complete. It might not be complete if tickets have required questions that have yet to be filled in. It comes with full data about the order.

Terms is a beta feature. Contact us to get it enabled.

tito('on:registration:terms_accepted', function(){
  // code here will be fired when the customer accepts your terms and conditions
})

on:registration:terms_accepted

This is a beta feature to make your customers accept some terms and conditions before proceding with the registration. Get in contact if you want to use this feature.

This will get fired as soon as the customer accepts your terms and conditions. We don't know anything about them at this stage so it sends no data.

<tito-widget
  event="ultimateconf/2013"
  prefill='{
    "name": "Tony Soprano",
    "email": "tony@sopranoinc.com"
  }'
  ></tito-widget>

You can pass in data to the widget that will prefill certain fields to save your attendees time. Valid fields are:

name
email
company_name
vat_number
phone_number
address
city
state_province_region
zip_postal_code
country
metadata

You have to be a bit careful with quotes because the value is parsed as JSON and it expects double quotes. One solution is to wrap the attribute in single quotes like this:

prefill='{ "name": "Tony Soprano" }'

Or if you really want the attribute to use double-quotes then you need to escape the ones inside:

prefill="{ "name": "Tony Soprano" }"

You can also pass data in using the prefill parameter in the URL:

https://mywebsite.com/?prefill=%7B%22company_name%22%3A%20%22My%20Company%22%7D

That's the equivalent of prefill={"company_name":"My Company"} but it's escaped for use in a URL.

<script
  src='https://js.tito.io/v2/with/plugin1,plugin2'
  async
  ></script>

Various plugins are available, including pre-defined integrations with third-party tools. To load plugins, you can append with/<pluginname> to the end of the src attribute of the script tag. You can use multiple plugins by separating them with a comma.

The test_mode plugin allows you to put through test transactions to see what your attendees will see when they register for your events. It’s very useful for you to be able to check over your Tito setup before you share your event publicly.

The facebook plugin sends data via Facebook's fbq function. Make sure that you have loaded the facebook script to use this plugin.

By default, the widget is loaded inside an iframe. This makes it easy to isolate the CSS and make sure your website's design doesn't leak into the widget. However, if you want full control over how the widget looks then using the inline plugin will skip the iframe and embed it directly into your website. You can then use your own CSS to style the widget.

Using the widget inline also allows you to listen to any of the javascript callbacks.

We have three different plugins for Google Analytics:

google_analytics
gtag
gtm

Read more about which one to use and how to integrate it into your website here.

Use the hits plugin to record a page view every time someone loads the widget.

Use the trialfire plugin to integrate with Trialfire.

<tito-widget
  event="ultimateconf/2013"
  email-placeholder="michael.scott@dundermifflin.inc"
  name-placeholder="Michael Scott"
  ></tito-widget>

You can use email-placeholder and name-placeholder attributes to set custom placeholders for the name and email fields on the order form.

Tito Widget V2

Basic usage

Form Styles

Buttons

Showing Specific tickets

A single ticket

Multiple tickets

Widget

Secret tickets

Passing in a discount code

JavaScript API

Async

Mounting a widget

Mounting a button

Callbacks

Widget loaded

Registration started

Registration finished

Terms accepted

Prefill Data

Using the URL

Plugins

Test Mode

Facebook

Inline

Google Analytics

Hits

Trialfire

Custom order form placeholders