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.

Style the widget

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>

Show specific tickets

You can choose to show just one specific ticket or a set of tickets, with the releases attribute (comma separate the release IDs to show more than one ticket type):

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

Pass in a discount code

You can pass a discount code to a widget so that a discount is automatically applied when people register via the widget, using the discount-code attribute:

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

Set the widget language

If you're using our beta Internationalization feature, you can pass in the locale  attribute to the widget to set the widget language:

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

Here's a list of supported languages and the locale code you'd need to use:

      en-GB: "English (Ireland & UK)",
      en: "English (USA)",
      zh: "Chinese",
      fr: "French",
      de: "German (Informal)",
      de-formal: "German (Formal)",
      fi: "Finnish",
      is: "Icelandic",
      it: "Italian",
      ga: "Irish (Ireland)",
      hu: "Hungarian",
      sv: "Swedish",
      ja: "Japanese",
      pl: "Polish",
      pt: "Portuguese",
      nl: "Dutch",
      es: "Spanish",
      es-MX: "Spanish (Mexico)"

Use source tracking

If you have our beta Source Tracking feature enabled, you can pass the source  attribute through the widget, so that any orders placed using that specific widget are recorded against a specific source in your reports. This is useful on landing pages for example, or if you're working with partners who are selling tickets from their website:

<tito-button event="ultimateconf/2013" source="partner-code"></tito-button>

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.

You can send data to the Tito widget using JSON via the prefill attribute on the widget.

Prefilling order details

You can prefill order details by passing a prefill attribute to the widget.

Redirecting back to your domain

  1. Custom close link — The custom close link allows you to set a URL that the customer will be redirected to if they click the "X" to close their order after their order is complete.
  2. Custom auto-redirect link — (private-beta, please email us to activate). The custom auto-redirect is a URL that the customer will be taken to automatically either a) immediately after they fill in their details and pay or b) after they complete every ticket in an order.

For both options, you can pass :registration_id to include the unique slug that you can use to look up the order later, ie:

http://your-domain.com/thank-you?registration_id=:registration_id

______________________

Need help with something specific? Search our FAQs section to find instant answers. 

If you can’t see what you need, drop us a line at support@tito.io or chat with us in-app and we’ll get back to you as quickly as we can.

Did this answer your question?