Tito Widget V2
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
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>
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>
Multiple tickets
Show multiple tickets with a comma separated list:
<tito-button event="ultimateconf/2013" releases="3elajg6qcxu,6qiiw4socs4"></tito-button>
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>
This works for the widget too:
<tito-widget event="ultimateconf/2013" discount-code="half-off"></tito-widget>
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 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:
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" }"
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, 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.
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.
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:
google_analytics
gtag
gtm
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.