Tito redux

Tito Documentation

Anything out of place? Please get in touch!!

Embeddable JavaScript Widget

If you want to display a registration form on your own website or blog, you can use our JavaScript widget.

The widget will open the Tito checkout process in an overlay without leaving your site, unless the customer is visiting from a mobile site, in which case the widget will open the checkout in a new tab.

To embed the form in your site, just copy and paste the following html snippet, making sure to change the event path to the appropriate event path for your event:

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

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

SSL

Since the widget collects potentially sensitive data, we strongly suggest that you to use SSL on any pages that host the widget. SSL certs are easier than ever to set up. For example, Cloudflare provide free SSL certificate hosting.

Note All Tito requests are delivered over SSL, even when using the widget. Providing SSL on your site helps prevent the potential for a man-in-the-middle attack that might tamper with our widget, and it gives your customers the comfort of the secure lock icon in their browser.

If you serve the widget over a plain HTTP connection, payment and registration pages will by default open in a new window.

If you want to test the widget locally, you can enable development mode, which does not enforce the SSL requirement. Just add this to your page:

<script>TitoDevelopmentMode = true</script>

If you are confident that you will not be collecting any sensitive information, or you have a legitimate reason for not requiring SSL, you can override the SSL check with the ssl-check-disabled attribute:

<tito-widget event="ultimateconf/2013" ssl-check-disabled></tito-widget>

Please note that using SSL potentially affects your site’s search engine rankings and that using SSL for everything is becoming standard practice.

Form styles

We provide a sample style for the embed form that you can use as a base. Just include the following stylesheet:

<link rel="stylesheet" type="text/css" href='https://css.tito.io/v1.1' />

Buttons

If you just want to display a “Tickets” button, you can do that using Tito.js too:

<!-- place this in the head of your document -->
<script src="https://js.tito.io/v1" async></script>

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

The button can be styled to match your site using CSS.

Customising

You can customise the style of the widget as much as you like with CSS. You don’t need to use the provided CSS and we encourage everyone to be creative! Just inspect the rendered html: every wrapper has a custom tito- prefixed class.

You can specify the button label:

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

<tito-button event="ultimateconf/2013" releases="3elajg6qcxu"></tito-button>
I only show one ticket

This works for the widget too:

Passing in a discount code

You can pass a discount code to a widget, with the discount-code attribute:

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

This works for the widget too:

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

  Tito.on('registration:started', function(data){
    // code here will be fired when the purchase form loads
  })
  • registration:started 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.
{
  "slug": "xyzdef123456",
  "line_items": [{
    "release_slug": "1234abcd",
    "price":        "4.00",
    "title":        "Regular",
    "quantity":     1,
    "total":        "4.00",
    "currency":     "USD"
  }]
}
  • registration:filling happens when the customer fills in their name or email, and passes along that name and email. eg.
{name: 'Joe', email:'joe@joe.joe'}
  • registration:finished 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. eg.
{
  "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":    ""
}
  • registration:complete contains the same info as registration:filling, although it is likely to contain more completed info. It happens when all tickets in an order have been dealt with.

Dynamically loading Tito widgets and buttons

If you want a bit more control over when the widget builds, you can provide an async call back to the js.tito.io loader.

Before you include the JS snippet above, paste the following:

window.titoWidgetCallback = function(){
  TitoWidget.build_widgets = false
}

This will leave the tito-button and tito-widget elements in place, not loaded.

When you’re ready to initialize them, call TitoWidget.buildWidgets().

You can see a sample of how this is used to pass the Google Analytics Linker param to the widgets.

If you ever need some help, don't hesitate to contact us…