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

Payment options

Please note that the V2 widget only works with Stripe out of the box.

For PayPal we have integrated the more modern PayPal Commerce Platform with the V2 widget.

As we are still testing this integration so if you want to offer PayPal at checkout we must enable a beta flag on your account. Please contact us here to request the feature and once that is done you will need to reconnect in your account settings.

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 class="no-clear" id="tito-widget"></div>

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

<div class="no-clear" 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 accepted -Beta feature

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.

Note that the ?prefill= bit comes after the /#/ bit.

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

Various plugins are available that have 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 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.

<script src='https://js.tito.io/v2?key=xyz' async></script>

You can load the widget in test mode by using a test mode publishable key.

To get a test mode public key:

Go to https://id.tito.io
Click on "API Access"
Click on "Generate New Token"
Choose "Test" and "Publishable Key" and click "Create"

Now you can add key= to your script src attributes and all requests and purchases will be in test mode.

<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 -Beta feature

Prefill Data

Using the URL

Plugins

Facebook

Inline

Google Analytics

Hits

Trialfire

Test Mode

Custom order form placeholders