API and AuthenticationHosted Package
Data attributes and JavaScript API
Use HTML attributes or JavaScript methods to add Tiquo login, customer fields, orders, bookings, and analytics events
Data attributes and JavaScript API
The Hosted Package works with plain HTML. This makes it compatible with website builders that let you add custom attributes to elements.
Passwordless login
<form data-tiquo-form="passwordless-login">
<input data-tiquo-member="email" type="email" placeholder="Email" />
<div data-tiquo-passwordless="step-2">
<input data-tiquo-member="token" inputmode="numeric" placeholder="Code" />
</div>
<p data-tiquo-message></p>
<button data-tiquo-passwordless-button="Sign in">Send code</button>
</form>When the form is submitted for the first time, Tiquo sends a one-time code to the email address. When the code field is filled and submitted, the customer is signed in.
Show or hide content by auth state
<div data-tiquo-show="logged-in">
Visible to signed-in customers.
</div>
<div data-tiquo-show="logged-out">
Visible to visitors who are not signed in.
</div>Render customer fields
<span data-tiquo-customer="firstName"></span>
<span data-tiquo-customer="email"></span>The field path is read from the signed-in customer record.
Render orders
<div data-tiquo-orders data-tiquo-limit="5">
<div data-tiquo-order-item>
<span data-tiquo-order="orderNumber"></span>
<span data-tiquo-order="status"></span>
<span data-tiquo-order="total"></span>
</div>
<p data-tiquo-empty>No orders yet.</p>
</div>Optional filters:
data-tiquo-limit="5"data-tiquo-status="paid"
Render bookings
<div data-tiquo-bookings data-tiquo-upcoming="true" data-tiquo-limit="5">
<div data-tiquo-booking-item>
<span data-tiquo-booking="serviceName"></span>
<span data-tiquo-booking="startTime"></span>
<span data-tiquo-booking="status"></span>
</div>
<p data-tiquo-empty>No upcoming bookings.</p>
</div>Optional filters:
data-tiquo-limit="5"data-tiquo-status="confirmed"data-tiquo-upcoming="true"
JavaScript API
Use window.Tiquo.ready when you want to call the API after the script loads.
<script>
window.Tiquo.ready(function (tiquo) {
tiquo.track("booking_started", {
eventName: "Booking Started",
eventProperties: {
source: "homepage"
}
});
});
</script>Available methods:
Tiquo.ready(callback)Tiquo.track(eventType, options)Tiquo.identify(options)Tiquo.sendOTP(email)Tiquo.verifyOTP(email, code)Tiquo.getUser()Tiquo.logout()Tiquo.getOrders(options)Tiquo.getBookings(options)Tiquo.getUpcomingBookings(options)Tiquo.render()Tiquo.onAuthStateChange(callback)Tiquo.setConsent(mode)Tiquo.getConsent()
The Hosted Package does not expose raw access or refresh token getters.