Service catalogs and locked booking

Build service catalogs, service detail pages, and booking embeds for a selected service. First, complete the installation.

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.

JavaScript API

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

See Rendering and empty states for shared collection behaviour.