NAV

Tito Widget V2

The Tito widget V2 has the following goals in mind:

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);};

// Specify which events are allowed to be loaded by the widget.
tito("config.set", { allowedEvents: ["ultimateconf/2013"] });
</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. Note, if you are not using those custom elements you must specify an array list of events which are allowed to be loaded by the widget.

Mounting a widget

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

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

Mounting a button

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

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

Saving URL parameters in the metadata

<tito-widget
  event="ultimateconf/2013"
  save-metadata-parameters="foo,bar"
  ></tito-widget>

You can pass a list of URL parameters you want to add to the registration's metadata. For example, if you set the save-metadata-parameters attribute to "foo,bar" and then add this to the URL:

?foo=1&bar=2&something=3

Then the metadata will be set to:

{ "foo": "1", "bar": "2" }

It ignores the something parameter because it's not in the list.

UTM parameters

<tito-widget
  event="ultimateconf/2013"
  save-metadata-parameters="utm_*"
  ></tito-widget>

You can use a wildcard in save-metadata-parameters to capture all UTM parameters by setting it to "utm_*". For example:

?utm_campaign=spring&utm_content=banner&utm_medium=cpc&utm_source=sample&utm_term=local%2Bevents

Would lead to:

{ "utm_campaign": "spring", "utm_content": "banner", "utm_medium": "cpc", "utm_source": "sample", "utm_term": "local%2Bevents" }

Plugins

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

Development Mode

The widget requires a secure https connection. If you try to load the widget on a plain http connection it will not work, a link to your event homepage on Tito will be loaded instead. The development_mode plugin allows you to bypass the https requirement if you only have a plain http connection available while developing your site and widget locally. The development_mode plugin must not be used in your production environment.

Test Mode

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.

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

Google Analytics is changing. Their eCommerce tracking is moving to GA4, and as such, we are trialling a new ga4 plugin.

The below plugins are now deprecated:

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.

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.

Events widget

To display a list of your upcoming and past events on your site, like what appears on your Tito public account timeline here for example, you can use the <tito-events> widget.

<tito-events account="ultimateconf"></tito-events>

Register interest widget

To add a form on your site for people to register interest in your event, you can use the <tito-register-interest> widget.

<tito-register-interest event="ultimateconf/2013"></tito-register-interest>