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

Use one form and one submit button for the full passwordless flow. The first submit sends the OTP email. The second submit verifies the OTP and signs the customer in.

<form data-tiquo-form="passwordless-login">
  <div data-tiquo-passwordless="step-1">
    <input data-tiquo-member="email" type="email" name="email" placeholder="Email" required />
  </div>

  <div data-tiquo-passwordless="step-2">
    <input data-tiquo-member="token" type="text" name="token" inputmode="numeric" placeholder="Code" required />
  </div>

  <p data-tiquo-message></p>
  <button
    data-tiquo-passwordless-button="Sign in"
    data-tiquo-passwordless-send-loading="Sending..."
    data-tiquo-passwordless-verify-loading="Signing 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.

The Hosted Package hides step-2 until the OTP has been sent, then hides step-1 if you use the optional data-tiquo-passwordless="step-1" wrapper. Inputs inside a hidden step are disabled automatically so browser form validation does not block submission.

Passwordless login and signup forms are automatically hidden after the customer is signed in. They become visible again after logout.

The email field must use data-tiquo-member="email" and the OTP field must use data-tiquo-member="token". In Webflow, make sure the hidden OTP field is not configured as an email input. Use a text input with numeric input mode for the OTP code.

Webflow setup checklist

• Put both steps inside the same Webflow form.
• Use one submit button for both steps.
• Add data-tiquo-form="passwordless-login" to the form.
• Wrap the email input in an element with data-tiquo-passwordless="step-1".
• Wrap the OTP input in an element with data-tiquo-passwordless="step-2".
• Set the email input to type="email", name="email", and data-tiquo-member="email".
• Set the OTP input to type="text", name="token", and data-tiquo-member="token".
• Do not use type="email" or name="email" on the OTP input.
• Add data-tiquo-passwordless-button="Sign in" to the submit button if you want the button text to change after the OTP is sent.
• Add data-tiquo-passwordless-send-loading="Sending..." to show loading text while the OTP email is being sent.
• Add data-tiquo-passwordless-verify-loading="Signing in..." to show loading text while the OTP code is being verified.
• Use data-tiquo-passwordless-loading="Loading..." if both steps should use the same loading text.
• Use ?v=1.1.18 or newer in the Hosted Package script URL so Tiquo intercepts submit buttons, Enter key submits, and form submits before Webflow can show its default success message.

If Webflow switches to its default Thank you! Your submission has been received! success state, the form submit is being handled by Webflow instead of only by Tiquo. Use ?v=1.1.18 or newer and keep data-tiquo-form="passwordless-login" on the actual Webflow form element.

If Webflow shows An invalid form control with name='email' is not focusable, the hidden OTP field is usually misconfigured as an email field or the hidden step contains a required control that is not disabled. Use the script URL with ?v=1.1.18 or newer so hidden-step inputs are disabled automatically.

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>

You can set these elements to display: none in Webflow to prevent a visible flash before the Hosted Package finishes checking the session. Tiquo will show the matching element again when it should be visible. If the element needs a specific display type, add data-tiquo-display="flex", data-tiquo-display="grid", or another CSS display value. Use ?v=1.1.18 or newer for this behaviour.

Log out button

Add data-tiquo-logout to a button or link to sign the customer out.

<button
  data-tiquo-logout
  data-tiquo-logout-loading="Logging out..."
>
  Log out
</button>

Optional attributes:

• data-tiquo-logout-loading="Logging out..." changes the button text while logout is running.
• data-tiquo-logout-redirect="/login" redirects after logout completes.

Use data-tiquo-show="logged-in" on the button or its wrapper if it should only be visible to signed-in customers.

Wallet card links

Use data-tiquo-wallet-card to link a signed-in customer to an Apple Wallet or Google Wallet card. The attribute value is the wallet card design name from the dashboard.

<a
  data-tiquo-wallet-card="member-card"
  data-tiquo-wallet-type="apple"
>
  Add to Apple Wallet
</a>

<a
  data-tiquo-wallet-card="member-card"
  data-tiquo-wallet-type="google"
>
  Add to Google Wallet
</a>

Optional attributes:

• data-tiquo-wallet-type="apple" links directly to the Apple Wallet install flow.
• data-tiquo-wallet-type="google" links directly to the Google Wallet install flow.
• Omit data-tiquo-wallet-type to link to the general wallet card install page.
• data-tiquo-wallet-card-loading="Loading..." changes the text while the link is being resolved.

The design name must match the wallet card design name configured in the dashboard. If the account has multiple wallet card designs, use one link per design name.

Advanced sites can also call:

const links = await window.Tiquo.getWalletCardLinks({
  designName: "member-card"
});

console.log(links.appleWalletUrl);
console.log(links.googleWalletUrl);

Render customer fields

<span data-tiquo-customer="firstName"></span>
<span data-tiquo-customer="lastName"></span>
<span data-tiquo-customer="displayName"></span>
<span data-tiquo-customer="email"></span>
<span data-tiquo-customer="phone"></span>
<span data-tiquo-customer="createdAt"></span>
<span data-tiquo-customer="firstActiveAt"></span>

The field path is read from the signed-in customer record. The Hosted Package can render these customer fields:

For a Webflow Image element, the package assigns profilePhoto to the image src instead of printing the URL as text:

<img data-tiquo-customer="profilePhoto" alt="Profile photo" />

For a div-based avatar, bind it as a CSS background image:

<div
  data-tiquo-customer="profilePhoto"
  data-tiquo-style="background-image"
  data-tiquo-hide-empty
  aria-label="Profile photo"
></div>

Set the div's dimensions, border radius, background-size: cover, and background-position: center in Webflow. Only HTTP and HTTPS image URLs are accepted. data-tiquo-hide-empty hides the element when the customer does not have a profile photo.

Created and First Active dates

createdAt and firstActiveAt have different meanings:

• Created is when the customer profile was created. Customer activity never changes or backdates this value.
• First Active is when the customer first became active through qualifying customer activity. It is not the database insertion time. Activities performed by staff, systems, integrations, or imports do not set it.

The values are equal when a customer creates their own account and is immediately active in the same flow. An imported or staff-created profile can have a later firstActiveAt, or no value until the customer becomes active.

Without formatting attributes, the Hosted Package renders the raw Unix millisecond value. Use data-tiquo-date-format to format a date declaratively:

<time
  data-tiquo-customer="createdAt"
  data-tiquo-date-format="datetime"
  data-tiquo-locale="en-GB"
  data-tiquo-time-zone="Europe/London"
></time>

<time
  data-tiquo-customer="firstActiveAt"
  data-tiquo-date-format="date"
></time>

Supported date formats:

data-tiquo-locale is optional and defaults to the page language or browser locale. data-tiquo-time-zone is optional and accepts an IANA timezone such as Europe/London. When the customer changes, signs out, or does not have the selected value, the Hosted Package clears the element so stale customer dates are not displayed.

The imperative API always returns the raw millisecond values:

const session = await window.Tiquo.getUser();

console.log(session?.customer?.createdAt);
console.log(session?.customer?.firstActiveAt);

Render customer parameters

Customer parameters are custom fields configured in Tiquo. Render them with data-tiquo-customer-parameter.

<span data-tiquo-customer-parameter="Membership Type"></span>
<span data-tiquo-customer-parameter="membership_type"></span>
<span data-tiquo-customer-parameter="system_source"></span>

The value can be:

• The parameter name, such as Membership Type
• A normalized parameter key, such as membership_type
• A system parameter ID, such as system_source
• A custom parameter schema ID

Parameter names are normalized automatically, so Membership Type, membership type, and membership_type resolve to the same value.

Edit profile fields and customer parameters

Use data-tiquo-form="profile" to let a signed-in customer update their own profile.

<form data-tiquo-form="profile">
  <label>
    First name
    <input data-tiquo-profile="firstName" />
  </label>

  <label>
    Last name
    <input data-tiquo-profile="lastName" />
  </label>

  <label>
    Phone
    <input data-tiquo-profile="phone" />
  </label>

  <label>
    Membership type
    <select data-tiquo-profile-parameter="Membership Type">
      <option value="">Select one</option>
      <option value="Standard">Standard</option>
      <option value="VIP">VIP</option>
    </select>
  </label>

  <label>
    Interests
    <select data-tiquo-profile-parameter="Interests" multiple>
      <option value="Events">Events</option>
      <option value="Dining">Dining</option>
      <option value="Retail">Retail</option>
    </select>
  </label>

  <label>
    Marketing opt-in
    <input data-tiquo-profile-parameter="system_marketing_opt_in" type="checkbox" />
  </label>

  <p data-tiquo-message></p>
  <button type="submit">Save profile</button>
</form>

Editable built-in profile fields:

displayName is render-only. It cannot be edited through the Hosted Package or DOM Package. Tiquo derives it from first and last name. createdAt and firstActiveAt are also read-only system fields and are never included in profile update payloads.

Editable customer parameters use data-tiquo-profile-parameter. The value can be a parameter name, normalized key, system parameter ID, or custom parameter schema ID.

Dropdown and multiselect values are validated by Tiquo before saving:

• select parameters can only save one configured, non-archived option.
• multiselect parameters can only save configured, non-archived options.
• Checkbox groups with the same data-tiquo-profile-parameter save as a multiselect array.
• Single checkboxes save true or false, which works for boolean parameters.

If a form tries to save a value that is not available for that parameter, the save is rejected and the message element shows the error.

Upload a profile photo

Add a photo trigger and preview within the same profile editor as the profile form. The package creates the file input, validates the selected image, previews it locally, and uploads it when the customer saves the form.

<div data-tiquo-profile-editor>
  <img
    data-tiquo-customer="profilePhoto"
    data-tiquo-profile-photo-preview
    alt="Profile photo"
  />

  <button
    type="button"
    data-tiquo-profile-photo-trigger
  >
    Choose photo
  </button>

  <form data-tiquo-form="profile">
    <input data-tiquo-profile="firstName" />
    <p data-tiquo-message></p>
    <button type="submit">Save profile</button>
  </form>
</div>

The default accepted formats are JPEG, PNG, GIF, and WebP. The maximum upload size is 5 MB. Set data-tiquo-max-size on the trigger to enforce a smaller client-side limit in bytes, or data-tiquo-accept to customise the browser file picker while keeping the same supported formats.

data-tiquo-profile-photo-preview works on an img element or a background-image element. The preview changes immediately after selection, before the form is submitted.

If the form sits elsewhere in the page, set data-tiquo-profile-editor="#profile-editor" on the form and give the containing editor that ID.

Render orders

<div data-tiquo-orders data-tiquo-limit="5">
  <div data-tiquo-order-item>
    <span data-tiquo-order="month"></span>
    <span data-tiquo-order="day"></span>
    <span data-tiquo-order="year"></span>
    <span data-tiquo-order="date"></span>
    <span data-tiquo-order="orderNumber"></span>
    <span data-tiquo-order="status"></span>
    <span data-tiquo-order="items"></span>
    <span data-tiquo-order="itemQuantity"></span>
    <span data-tiquo-order="total"></span>
  </div>

  <p data-tiquo-empty>No orders yet.</p>
</div>

Supported order fields include:

Optional filters:

• data-tiquo-limit="5"
• data-tiquo-status="completed"

The first data-tiquo-order-item element is the template. Tiquo hides that template and appends rendered copies for each order.

data-tiquo-status filters by the order lifecycle status, not payment status. Use values such as completed, processing, cancelled, refunded, or open_tab. Do not use payment statuses such as paid here.

Render bookings

<div data-tiquo-bookings data-tiquo-limit="upcoming" data-tiquo-count="5">
  <div data-tiquo-booking-item>
    <span data-tiquo-booking="date"></span>
    <span data-tiquo-booking="day"></span>
    <span data-tiquo-booking="month"></span>
    <span data-tiquo-booking="year"></span>
    <span data-tiquo-booking="id"></span>
    <span data-tiquo-booking="serviceName"></span>
    <span data-tiquo-booking="items"></span>
    <span data-tiquo-booking="itemQuantity"></span>
    <span data-tiquo-booking="duration"></span>
    <span data-tiquo-booking="startTime"></span>
    <span data-tiquo-booking="endTime"></span>
    <span data-tiquo-booking="status"></span>
  </div>

  <p data-tiquo-empty>No upcoming bookings.</p>
</div>

Optional filters:

• data-tiquo-limit="upcoming" or data-tiquo-limit="past"
• data-tiquo-count="5"
• data-tiquo-status="confirmed"

The first data-tiquo-booking-item element is the template. Tiquo hides that template and appends rendered copies for each booking.

data-tiquo-upcoming="true" still works for older pages, but new embeds should use data-tiquo-limit="upcoming" instead. When using upcoming or past, use data-tiquo-count for the number of bookings to render.

Booking fields:

Render a customer flow service catalog

Use service attributes to build a custom catalog from the services connected to a customer flow. Your Webflow or website-builder elements remain in full control of the layout and styling.

Set data-tiquo-services to the customer flow ID. The first data-tiquo-service-item child is the template that Tiquo hides and clones for each service.

<div data-tiquo-services="CUSTOMER_FLOW_ID" data-tiquo-limit="20">
  <article data-tiquo-service-item>
    <a
      data-tiquo-service-link="/services/{slug}?tiquoServiceId={id}"
    >
      <img data-tiquo-service="image" alt="" />
      <h2 data-tiquo-service="name"></h2>
      <span data-tiquo-service="categoryName"></span>
      <p data-tiquo-service="categoryDescription"></p>
    </a>

    <p data-tiquo-service="shortDescription"></p>
    <span data-tiquo-service="priceLabel"></span>
    <span data-tiquo-service="durationLabel"></span>
  </article>

  <p data-tiquo-empty>No services available.</p>
</div>

The customer flow ID is the ID in its booking or embed URL. For example, use CUSTOMER_FLOW_ID from https://book.tiquo.app/embed/CUSTOMER_FLOW_ID.

data-tiquo-service-link sets the element's href and supports these URL-encoded placeholders:

If the attribute has no value, its default link is ?tiquoServiceId={id}. Use data-tiquo-limit to cap the number of services; the default is 100.

Public services render without a customer session. When the customer is signed in, the collection also includes membership-gated services that customer is allowed to book. Inactive services, services outside their visibility window, and services unavailable to the current customer are not rendered.

Service fields

Set data-tiquo-service to any supported field:

When data-tiquo-service="image" or another image URL field is placed on an img, Tiquo safely sets src. On a link, it safely sets href. The existing data-tiquo-hide-empty, data-tiquo-preserve-text, and data-tiquo-style data attributes also work with service fields.

image is the simplest choice for catalog cards because it prefers an image configured directly on the service and automatically falls back to the first associated category image. Use serviceImage or categoryImage when the image source must be explicit. The plural images and categoryImages fields render as comma-separated URLs on text elements.

For example, use a service image as a background:

<div
  data-tiquo-service="image"
  data-tiquo-style="background-image"
  data-tiquo-hide-empty
></div>

Use categoryName to display the first associated category. If a service is assigned to multiple flow categories, use categoryNames to display every category as comma-separated text:

<span data-tiquo-service="categoryName"></span>
<span data-tiquo-service="categoryNames"></span>

Use categoryDescription to display the first configured description from an associated category. Use categoryDescriptions to display every configured associated category description as comma-separated text:

<p data-tiquo-service="categoryDescription"></p>
<p data-tiquo-service="categoryDescriptions"></p>

To render the two sources separately:

<img
  data-tiquo-service="serviceImage"
  data-tiquo-hide-empty
  alt=""
/>
<img
  data-tiquo-service="categoryImage"
  data-tiquo-hide-empty
  alt=""
/>

Render a custom service detail page

Set data-tiquo-service-detail to the same customer flow ID:

<section data-tiquo-service-detail="CUSTOMER_FLOW_ID">
  <img data-tiquo-service="image" alt="" />
  <h1 data-tiquo-service="name"></h1>
  <p data-tiquo-service="description"></p>
  <p data-tiquo-service="categoryDescription"></p>
  <span data-tiquo-service="priceLabel"></span>

  <div data-tiquo-service-booking></div>

  <p data-tiquo-empty>
    This service is unavailable.
  </p>
</section>

By default, the detail container reads the service ID from the tiquoServiceId query parameter written by the catalog link. To render a fixed service instead, set it directly:

<section
  data-tiquo-service-detail="CUSTOMER_FLOW_ID"
  data-tiquo-service-id="SERVICE_ID"
>
  <!-- Service fields and booking container -->
</section>

data-tiquo-service-booking becomes an automatically resizing customer-flow iframe. The requested service is preselected, category and service-catalog navigation are removed, and the customer cannot return to select another service. The remaining availability, quantity, payment, and booking steps continue normally.

If the service is missing or unavailable to the current visitor, Tiquo clears the service fields, hides the booking container, and shows data-tiquo-empty. It never falls back to the full flow catalog.

Render the current membership

Use data-tiquo-memberships for the collection wrapper. The first data-tiquo-membership-item child is the Webflow template that Tiquo clones for each matching membership.

<div
  data-tiquo-memberships
  data-tiquo-status="active"
  data-tiquo-limit="1"
>
  <article data-tiquo-membership-item>
    <span data-tiquo-membership="icon"></span>
    <h2 data-tiquo-membership="name"></h2>
    <p data-tiquo-membership="summary"></p>
    <span data-tiquo-membership="statusLabel"></span>
    <span data-tiquo-membership="priceLabel"></span>
    <span
      data-tiquo-membership="color"
      data-tiquo-style="background-color"
    ></span>
  </article>

  <div data-tiquo-empty>
    You do not have an active membership yet.
  </div>
</div>

Useful membership fields:

Use data-tiquo-status="all" to include inactive, expired, cancelled, and suspended memberships.

Render available membership plans

Use a separate collection for active public customer plans:

<div data-tiquo-membership-plans data-tiquo-current="include">
  <article data-tiquo-membership-plan-item>
    <span data-tiquo-membership-plan="icon"></span>
    <h3 data-tiquo-membership-plan="name"></h3>
    <strong data-tiquo-membership-plan="priceLabel"></strong>
    <p data-tiquo-membership-plan="description"></p>
    <p data-tiquo-membership-plan="features"></p>
    <span
      data-tiquo-membership-plan="currentLabel"
      data-tiquo-hide-empty
    ></span>
    <a
      data-tiquo-membership-plan="signupUrl"
      data-tiquo-preserve-text
    >Choose membership</a>
  </article>

  <div data-tiquo-empty>
    There are no other memberships available.
  </div>
</div>

data-tiquo-current accepts:

Plan fields include id, name, description, slug, type, priceLabel, billingPeriodLabel, features, color, icon, popularLabel, currentLabel, and signupUrl.

data-tiquo-preserve-text keeps the Webflow link label while Tiquo assigns signupUrl to href. data-tiquo-hide-empty hides elements such as Current and Popular badges when their value is empty.

Render guest pre-registration flows

For signed-in customers, data-tiquo-guest-flows renders the Guest Flows returned by the Customer API.

<div data-tiquo-guest-flows data-tiquo-limit="10">
  <article data-tiquo-guest-flow-item>
    <h3 data-tiquo-guest-flow="label"></h3>
    <p data-tiquo-guest-flow="inviteMessage"></p>
    <span data-tiquo-guest-flow="availableGuestsLabel"></span>
    <a data-tiquo-guest-flow="hostedUrl" data-tiquo-preserve-text>Register guests</a>
  </article>

  <p data-tiquo-empty>No guest registration flows are available.</p>
</div>

Advanced sites can access the same data directly:

const { guestFlows } = await window.Tiquo.getGuestFlows();

See the Customer API Guest Flows reference for the raw response fields.

Empty states

Place a data-tiquo-empty element inside the collection wrapper and outside its template. Tiquo hides it when results exist and shows it when the collection is empty.

This works for data-tiquo-orders, data-tiquo-bookings, data-tiquo-services, data-tiquo-service-detail, data-tiquo-memberships, and data-tiquo-membership-plans.

Wrap authenticated profile tabs in data-tiquo-show="logged-in" so signed-out visitors see the sign-in state instead of an empty customer-data message.

Authenticated membership embeds

embedMembership creates an automatically resizing membership iframe:

<div id="membership-signup"></div>

<script>
  window.Tiquo.ready(function (tiquo) {
    tiquo.embedMembership(
      "membership_plan_id",
      "#membership-signup",
      { minHeight: "240px" }
    );
  });
</script>

You can also add a Tiquo /embed/ iframe directly. The package discovers existing and dynamically added Tiquo iframes.

When the website has an authenticated session, Tiquo requests a short-lived, one-time iframe token and sends it only to the matching Tiquo origin with postMessage. The access token is never appended to the iframe URL. If the visitor is not authenticated, the embedded flow displays its normal sign-in interface.

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>

Service catalogs and locked booking are also available programmatically:

<div id="service-booking"></div>

<script>
  window.Tiquo.ready(async function (tiquo) {
    const catalog = await tiquo.getFlowServices("CUSTOMER_FLOW_ID");
    const service = await tiquo.getFlowService(
      "CUSTOMER_FLOW_ID",
      catalog.services[0].id
    );

    if (service) {
      await tiquo.embedServiceBooking(
        "CUSTOMER_FLOW_ID",
        service.id,
        "#service-booking",
        { minHeight: "240px" }
      );
    }
  });
</script>

getFlowService() returns null when the requested service is not available to the current visitor. embedServiceBooking() uses the same secure authenticated iframe handoff and automatic resizing as embedCustomerFlow().

Available methods:

• Tiquo.ready(callback)
• Tiquo.track(eventType, options)
• Tiquo.identify(options)
• Tiquo.sendOTP(email)
• Tiquo.verifyOTP(email, code)
• Tiquo.getUser()
• Tiquo.updateProfile(updates)
• Tiquo.uploadProfilePhoto(photo)
• Tiquo.logout()
• Tiquo.getOrders(options)
• Tiquo.getBookings(options)
• Tiquo.getMemberships()
• Tiquo.getGuestFlows()
• Tiquo.getWalletCardLinks(options)
• Tiquo.getUpcomingBookings(options)
• Tiquo.getFlowServices(bookingConfigId)
• Tiquo.getFlowService(bookingConfigId, serviceId)
• Tiquo.getIframeToken(customerFlowId, handoffVersion)
• Tiquo.embedCustomerFlow(flowUrl, container, options)
• Tiquo.embedServiceBooking(bookingConfigId, serviceId, container, options)
• Tiquo.embedMembership(planId, container, options)
• Tiquo.render()
• Tiquo.onAuthStateChange(callback)
• Tiquo.setConsent(mode)
• Tiquo.getConsent()

The Hosted Package does not expose raw access or refresh token getters.