NAV

API Early Access Please note this API is under active development — view our Changelog for updates

Tito Widget V2

The Tito widget V2 has the following goals in mind:

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.

Basic usage

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>

Form Styles

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

Buttons

<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

Showing Specific tickets

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

A single ticket

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

I only show one ticket

Multiple tickets

Show multiple tickets with a comma separated list:

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

I only show two tickets

Widget

This works for the widget too:

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

Secret tickets

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).

Passing in a discount code

<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

JavaScript API

Async

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.

Mounting a widget

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>

Mounting a button

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

<div class="no-clear" id="tito-button"></div>

Callbacks

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>

Widget loaded

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.

Registration started

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.

Registration finished

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

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.

Prefill 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:

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="{ &quot;name&quot;: &quot;Tony Soprano&quot; }"

Using the URL

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.

Plugins

<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.

Facebook

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

Inline

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.

Google Analytics

We have three different plugins for Google Analytics:

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

Hits

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

Trialfire

Use the trialfire plugin to integrate with Trialfire.

Test Mode

<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:

  1. Go to https://id.tito.io
  2. Click on "API Access"
  3. Click on "Generate New Token"
  4. 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.

Custom order form placeholders

<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.