Service Catalogs and Locked Booking

Use the DOM Package to load the services connected to a customer flow without rendering the complete customer-flow interface. Your application can build its own catalog and service-detail pages, then embed only the booking journey for the selected service.

Customer flow ID

The methods on this page use the customer flow's booking configuration ID. It is the ID in the flow's booking or embed URL.

For example, if the embed URL is:

https://book.tiquo.app/embed/CUSTOMER_FLOW_ID

pass CUSTOMER_FLOW_ID as bookingConfigId.

The customer flow must belong to the same organization as the Website SDK public key used to initialize the package. The current website domain must also be enabled under Settings > Website SDK.

Load a service catalog

Call getFlowServices() to load the active services connected to a customer flow:

const catalog = await tiquo.getFlowServices('CUSTOMER_FLOW_ID');

for (const service of catalog.services) {
  console.log(service.id);
  console.log(service.name);
  console.log(service.image);
  console.log(service.serviceImage);
  console.log(service.categoryImage);
  console.log(service.categoryName);
  console.log(service.categoryNames);
  console.log(service.categoryDescription);
  console.log(service.categoryDescriptions);
  console.log(service.effectivePrice);
}

Public services can be loaded without signing in. When the DOM Package has an authenticated customer session, the catalog also includes membership-gated services that the customer is allowed to book. Services that are inactive, outside their visibility window, or unavailable to the current customer are not returned.

The catalog response contains:

Each category contains id, name, optional description, optional image, serviceIds, and optional presetSection. Each catalog section contains id, name, categoryIds, and serviceIds.

Service fields

Each item in catalog.services uses the TiquoFlowService type:

Use image for a ready-to-display image with automatic category fallback. Use serviceImage or categoryImage when the UI needs to distinguish where the image was configured. images remains service-only, while categoryImages contains the category image URLs. categoryName is the first associated flow category, while categoryNames contains every associated category name. categoryDescription is the first configured description from an associated category, while categoryDescriptions contains all configured associated category descriptions.

Load one service

Use getFlowService() on a detail page:

const service = await tiquo.getFlowService(
  'CUSTOMER_FLOW_ID',
  'SERVICE_ID'
);

if (!service) {
  // The service does not exist in this flow or is unavailable to this visitor.
}

The method returns null when the service is not in the flow catalog visible to the current visitor. It does not fall back to a different service.

Embed booking for the selected service

After rendering your custom service content, call embedServiceBooking():

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

await tiquo.embedServiceBooking(
  'CUSTOMER_FLOW_ID',
  service.id,
  '#service-booking',
  {
    width: '100%',
    minHeight: '240px',
    autoResize: true,
  }
);

The embed:

• Preselects the exact service before the flow renders
• Removes the category and service-catalog navigation
• Prevents the customer from returning to select another service
• Keeps the flow's normal date, quantity, availability, payment, and booking steps
• Reuses the DOM Package's secure authenticated iframe handoff
• Automatically resizes unless autoResize is set to false

If the service ID is missing, invalid, or unavailable to the current customer, the embedded flow does not fall back to the full service catalog.

Custom catalog and detail page pattern

A typical integration uses two application routes:

1. The catalog route calls getFlowServices() and renders a card or block for each service.
2. Each card links to a custom detail route with the service ID in the route or query string.
3. The detail route calls getFlowService() and renders the service's image, description, price, and other fields.
4. The detail route calls embedServiceBooking() inside the booking section.

This keeps discovery and page design fully controlled by your application while Tiquo handles the final availability and booking journey.